Les effets de survol CSS peuvent-ils affecter les éléments non ciblés ?

Les effets de survol CSS peuvent-ils s'étendre à différents éléments ?

En CSS, il n'est pas directement possible d'appliquer des effets de survol sur un élément adjacent ou imbriqué dans un autre élément. Cela signifie que l'effet reste limité à l'élément auquel il est appliqué et que vous ne pouvez pas l'utiliser pour influencer d'autres éléments.

Effets descendants et frères et sœurs adjacents

Cependant, il existe deux exceptions à cette règle. lors de l'utilisation du sélecteur de frère adjacent ( ) ou du sélecteur de descendant (>) :

• Adjacent Frères et sœurs : Si deux éléments sont frères et sœurs adjacents (apparaissent directement l'un après l'autre dans le code HTML), vous pouvez appliquer un effet à un élément en fonction de l'état de survol de l'autre à l'aide du sélecteur de frère adjacent. Par exemple :

#first-sibling:hover + #second-sibling {
  opacity: 0.3;
}

• Descendants : De même, si un élément est le descendant d'un autre (imbriqué à l'intérieur), vous pouvez appliquer un effet au descendant en fonction sur l'état de survol du parent à l'aide du sélecteur de descendant. Par exemple :

#parent-element:hover #child-element {
  opacity: 0.3;
}

Résoudre votre problème

Dans votre exemple spécifique, vous souhaitez modifier l'opacité d'un élément appelé #thisElement lorsque l'utilisateur survole une image avec un classe de « img ». Cependant, vous ne pouvez pas cibler directement #thisElement à l'aide des effets de survol CSS sur "img". Au lieu de cela, vous pouvez envisager :

1. Utiliser des frères et sœurs adjacents : Si #thisElement est le prochain frère adjacent de l'image après celle-ci dans le HTML, vous pouvez utiliser :

.img:hover + #thisElement {
  opacity: 0.3;
}

2. Utilisation de descendants : Si #thisElement est imbriqué dans le conteneur de l'image, vous pouvez utiliser :

.img-container:hover #thisElement {
  opacity: 0.3;
}

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!