Der umgeschriebene Titel lautet: Ändern Sie den Listentitel als Reaktion darauf, dass sich der Cursor zum Listenelement bewegt
P粉131455722
2023-09-04 23:54:54
<p>Ich erstelle eine verknüpfte Tabelle und möchte die Tabelle schöner gestalten, indem ich die Hintergrundfarbe der Tabellenüberschrift ändere, wenn ich meine Maus über einen der Listenlinks bewege. Ich weiß jedoch nicht, wie ich die Eigenschaften eines Containerelements ändern kann, indem ich seine kleineren Elemente beeinflusse. Das ist mein Code: </p>
<pre class="brush:php;toolbar:false;"><html lang="vi">
<Kopf>
<Stil>
.toc-container {
maximale Breite: 600 Pixel;
Schriftfamilie: „Roboto“, serifenlos;
Hintergrund: #deff9d;
Randradius: 8px;
Box-Shadow: 0 4px 11px rgba(0, 0, 0, 0,6);
}
.toc-container h2.index-heading {
Texttransformation: Großbuchstaben;
Schriftstärke: normal;
Rand: 0 16px;
Polsterung oben: 16px;
}
.Inhaltsverzeichnis {
Listenstil: keiner;
Polsterung: 0;
}
.Inhaltsverzeichnis li.Autor li.blog {
Hintergrund: #222;
Übergang: 400 ms;
Listenstil: keiner;
}
.Inhaltsverzeichnis li.author{
Hintergrundfarbe: grün;
}
.table-of-contents li.author li:nth-of-type(even).blog {
Hintergrund: #2e2e2e;
}
.table-of-contents li.author li:hover.blog {
Hintergrund: #000;
}
.Inhaltsverzeichnis li a {
Textdekoration: keine;
Farbe: #fff;
Rand links: 24px;
Polsterung: 16px 0;
Bildschirmsperre;
}
</style>
</head>
<Körper>
<div class="toc-container">
<h2 class="index-heading">heading</h2>
<ul class="table-of-contents">
<li class="author">
<a href="#">Name des Autors</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>