Comment puis-je utiliser CSS pour appliquer des effets de survol à plusieurs éléments simultanément ?

Survol d'un élément, effets sur plusieurs éléments en CSS

Dans la mise en page HTML, vous pouvez rencontrer un scénario dans lequel le survol d'un élément devrait déclencher effets sur plusieurs éléments liés. Considérez le code HTML suivant :

<div class="section">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

Les classes "image" et "layer" ont des bordures avec des couleurs différentes pour leurs états normal et de survol. Le but est que la couleur de la bordure change sur les deux éléments lors du survol de l'élément "calque" et vice versa.

Solution CSS :

Obtenir cet effet sans JavaScript est possible en utilisant CSS. Voici un exemple :

HTML :

<div class="section">
    <img src="myImage.jpg" />
    <div class="layer">Lorem Ipsum</div>
</div>

CSS :

.section {
    background: #ccc;
}

.layer {
    background: #ddd;
}

.section:hover img {
    border: 2px solid #333;
}

.section:hover .layer {
    border: 2px solid #F90;
}

Explication :

• Le sélecteur ".section:hover img" spécifie que lorsque l'élément ".section" est survolé, l'élément "img" qu'il contient doit avoir une bordure solide de 2 pixels avec la couleur #333.
• De même, le sélecteur ".section:hover .layer" cible l'élément ".layer" dans le ".section" et change la couleur de sa bordure en #F90 au survol.

Ce CSS garantit que lorsque vous survolez l'élément « calque », les éléments « image » et « calque » verront leurs couleurs de bordure mises à jour, créant l'effet souhaité sans aucun script.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!