CSS peut-il modifier les propriétés d'un élément en survolant un autre élément ?

Impact sur un élément distinct lors du survol d'un autre

Est-il possible de modifier les propriétés d'un élément lorsqu'un élément distinct est survolé ? Cette requête explore les moyens d'obtenir ce comportement en utilisant uniquement CSS.

Bien que les capacités inhérentes de CSS empêchent de cibler les non-descendants ou les frères et sœurs adjacents, il existe des scénarios spécifiques dans lesquels cela est possible.

Descendants

Si l'élément concerné est un descendant de l'élément survolé, le sélecteur CSS peut cibler efficacement en utilisant :

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

Par exemple, cela cible le "child_element" dans le "parent_element" en survol :

<div>

Frères et sœurs adjacents

Cibler les frères et sœurs adjacents nécessite une approche légèrement différente :

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

Cela affecte "second_sibling" lorsque "first_sibling" est survolé :

<div>

Mise en œuvre dans votre cas

Compte tenu de votre échantillon, vous visez probablement quelque chose de similaire à :

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

Cela affecte la deuxième image lorsque la première image est survolée terminé.

Démo

Visitez [cette démo JS Fiddle] (insérer le lien de démonstration ici) pour un exemple interactif.

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!