Comment puis-je créer des effets de survol synchronisés sur plusieurs éléments en utilisant uniquement CSS ?

Obtenir des effets de survol sur plusieurs éléments

Dans le développement Web, il est courant de rencontrer des scénarios dans lesquels plusieurs éléments doivent répondre aux interactions de survol. Considérez la structure HTML suivante :

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

Les éléments « .image » et « .layer » ont des bordures avec des couleurs distinctes pour leurs états normal et de survol. Le but est de changer la couleur de la bordure de survol des deux éléments lorsque l'élément '.layer' est survolé.

Solution CSS

Pour y parvenir sans JavaScript, CSS peut être utilisé :

.section {
  background: #ccc;
}

.layer {
  background: #ddd;
}

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

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

Dans ce code :

• La classe '.section' spécifie la couleur d'arrière-plan.
• La classe '.layer' définit la couleur d'arrière-plan et la largeur de la bordure pour l'élément '.layer'.
• La règle '.section:hover img' modifie la bordure couleur de l'image lorsque le '.section' est survolé.
• La règle '.section:hover .layer' modifie la couleur de la bordure du ".layer" dans les mêmes conditions de survol, garantissant que les deux éléments répondent aux interactions de survol sur l'élément ".layer".

Cette solution offre un moyen élégant de créer des effets de survol synchronisés pour plusieurs éléments sans compter sur des scripts.

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!