Le titre réécrit est : Modifiez le titre de la liste en réponse au déplacement du curseur vers l'élément de la liste.
P粉131455722
2023-09-04 23:54:54
<p>Je crée un tableau lié et je souhaite le rendre plus joli en modifiant la couleur d'arrière-plan de l'en-tête du tableau lorsque je déplace ma souris sur l'un des liens de la liste. Cependant, je ne sais pas comment modifier les propriétés d'un élément conteneur en affectant ses éléments plus petits. Voici mon code : </p>
<pre class="brush:php;toolbar:false;"><html lang="vi">
<tête>
<style>
.toc-conteneur {
largeur maximale : 600 px ;
famille de polices : "Roboto", sans empattement ;
arrière-plan : #deff9d ;
rayon de bordure : 8 px ;
box-shadow : 0 4px 11px rgba(0, 0, 0, 0.6);
}
.toc-conteneur h2.index-titre {
transformation de texte : majuscule ;
poids de la police : normal ;
marge : 0 16px ;
rembourrage supérieur : 16 px ;
}
.table des matières {
style de liste : aucun ;
remplissage : 0 ;
}
.table des matières li.auteur li.blog {
arrière-plan : #222 ;
transition : 400 ms ;
style de liste : aucun ;
}
.table des matières li.auteur{
couleur de fond : vert ;
}
.table des matières li.auteur li:ntième-de-type(même).blog {
arrière-plan : #2e2e2e ;
}
.table des matières li.auteur li:hover.blog {
arrière-plan : #000 ;
}
.table des matières li a {
décoration de texte : aucune ;
couleur : #fff ;
marge gauche : 24 px ;
remplissage : 16px 0 ;
bloc de visualisation;
}
</style>
≪/tête>
<corps>
<div class="toc-container">
<h2 class="index-heading">heading</h2>
<ul class="table-des-matières">
<li class="auteur">
<a href="#">Nom de l'auteur</a>
<ul>
<li class="blog">
<a href="#">Nháp 1</a>
≪/li>
</ul>
≪/li>
</ul>
</div>
</corps>
</html></pre>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Je pense que c'est plus facile à réaliser en utilisant JavaScript, vous pouvez utiliser des événements d'éléments
mouseenter和mouseleavepour réaliser des changements de style, peut-être que cela peut vous aider. Voici le code :<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>