Tajuk yang ditulis semula ialah: Tukar tajuk senarai sebagai tindak balas kepada kursor yang bergerak ke elemen senarai
P粉131455722
2023-09-04 23:54:54
<p>Saya sedang mencipta jadual terpaut dan saya mahu menjadikan jadual itu lebih cantik dengan menukar warna latar belakang pengepala jadual apabila saya menggerakkan tetikus saya ke atas salah satu pautan senarai. Walau bagaimanapun, saya tidak tahu bagaimana untuk menukar sifat unsur kontena dengan menjejaskan unsur yang lebih kecil. Ini kod saya: </p>
<pre class="brush:php;toolbar:false;"><html lang="vi">
<kepala>
<gaya>
.toc-container {
lebar maksimum: 600px;
font-family: "Roboto", sans-serif;
latar belakang: #deff9d;
jejari sempadan: 8px;
bayang-kotak: 0 4px 11px rgba(0, 0, 0, 0.6);
}
.toc-container h2.index-heading {
text-transform: huruf besar;
berat fon: normal;
jidar: 0 16px;
padding-top: 16px;
}
.isi kandungan {
gaya senarai: tiada;
padding: 0;
}
.jadual-kandungan li.pengarang li.blog {
latar belakang: #222;
peralihan: 400ms;
gaya senarai: tiada;
}
.jadual-kandungan li.pengarang{
warna latar belakang: hijau;
}
.jadual-kandungan li.pengarang li:nth-of-type(even).blog {
latar belakang: #2e2e2e;
}
.jadual-kandungan li.pengarang li:hover.blog {
latar belakang: #000;
}
.jadual-kandungan li a {
hiasan teks: tiada;
warna: #fff;
jidar-kiri: 24px;
pelapik: 16px 0;
paparan: blok;
}
</style>
</head>
<badan>
<div class="toc-container">
<h2 class="indeks-tajuk">tajuk</h2>
<ul class="jadual-kandungan">
<li class="pengarang">
<a href="#">Nama pengarang</a>
<ul>
<li class="blog">
<a href="#">Bahagian 1</a>
</li>
</ul>
</li>
</ul>
</div>
</badan>
</html></pre>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya rasa ini lebih mudah dicapai menggunakan JavaScript, anda boleh menggunakan acara elemen
mouseenter和mouseleaveuntuk mencapai perubahan gaya, mungkin ini boleh membantu anda. Ini kodnya:<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>