Les effets de survol d'un élément peuvent-ils se propager à un autre à l'aide de CSS ?

Les effets sur un élément peuvent-ils influencer un autre élément ?

Le code donné vise à améliorer l'opacité d'une image tout en diminuant simultanément l'opacité d'un autre élément. lorsque le curseur survole l'image. Bien qu'un tel effet puisse paraître simple, CSS seul ne peut pas l'exécuter.

Pour établir l'effet souhaité, les deux éléments concernés doivent être soit des descendants, soit des frères et sœurs adjacents dans le code.

Effet sur le Descendant

#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
    opacity: 0.3;
}

Cela affecte les éléments structurés comme :

<div>

Effet sur les frères et sœurs adjacents

#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

Cela fonctionne pour la structure HTML :

<div>

Dans les deux cas, le le deuxième élément du sélecteur est affecté.

Pour le besoin spécifique noté dans la requête, une expression comme celle-ci pourrait travail :

img:hover + img {
    opacity: 0.3;
    color: red;
}

[Démo JS Fiddle](https://jsfiddle.net/)

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!