重寫後的標題為：改變清單標題以回應遊標移動到清單元素
P粉131455722
2023-09-04 23:54:54
<p>我正在建立一個連結表格，我希望當我將滑鼠移到清單連結之一時，透過更改表格標題的背景顏色使表格更加漂亮。然而，我不知道如何透過影響其較小元素來更改容器元素的屬性。這是我的程式碼：</p>
<pre class="brush:php;toolbar:false;"><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></pre>
我認為使用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>