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

Application d'effets de survol sur plusieurs éléments en CSS

Lorsque vous survolez un élément spécifique, vous souhaiterez peut-être appliquer des effets à plusieurs éléments associés. Par exemple, vous avez deux éléments adjacents, « image » et « calque », chacun avec des bordures distinctes. Comment faire en sorte que le survol d'un élément affecte les couleurs des bordures des deux éléments ?

Solution sans JavaScript

Pour y parvenir sans JavaScript, vous pouvez utiliser CSS comme ceci :

.section {
  background: #ccc;
}

.layer {
  background: #ddd;
}

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

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

Dans cet exemple, lorsque vous survolez l'élément ".section", le "img" qu'il contient aura une bordure pleine de 2 pixels avec la couleur #333. Simultanément, l'élément ".layer" dans ".section" recevra également une bordure unie de 2 pixels avec la couleur #F90. Un comportement identique se produit lorsque vous survolez l'élément ".layer".

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!