我正在创建一个链接表格，我希望当我将鼠标移动到列表链接之一时，通过更改表格标题的背景颜色使表格更加漂亮。然而，我不知道如何通过影响其较小元素来更改容器元素的属性。这是我的代码：
1
919<html lang="vi">
<head>
<style>
.toc-container {
max-width: 600px;
font-family: "Roboto", sans-serif;
background: #deff9d;
border-radius: 8px;
box-shadow: 0 4px 11px rgba(0, 0, 0, 0.6);
}
.toc-container h2.index-heading {
text-transform: uppercase;
font-weight: normal;
margin: 0 16px;
padding-top: 16px;
}
.table-of-contents {
list-style: none;
padding: 0;
}
.table-of-contents li.author li.blog {
background: #222;
transition: 400ms;
list-style: none;
}
.table-of-contents li.author{
background-color: green;
}
.table-of-contents li.author li:nth-of-type(even).blog {
background: #2e2e2e;
}
.table-of-contents li.author li:hover.blog {
background: #000;
}
.table-of-contents li a {
text-decoration: none;
color: #fff;
margin-left: 24px;
padding: 16px 0;
display: block;
}
</style>
</head>
<body>
<div class="toc-container">
<h2 class="index-heading">heading</h2>
<ul class="table-of-contents">
<li class="author">
<a href="#">作者的名字</a>
<ul>
<li class="blog">
<a href="#">Nháp 1</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html> 
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
我认为使用JavaScript更容易实现这一点，你可以使用元素事件
mouseenter和mouseleave来实现样式的改变，也许这可以帮到你。下面是代码：<script> const headerDiv = document.querySelector('.index-heading'); const blogDiv = document.querySelector('.blog'); blogDiv.addEventListener('mouseenter', function(e) { headerDiv.style.background = 'purple' }) blogDiv.addEventListener('mouseleave', function(e) { headerDiv.style.background = '#deff9d' }) </script>