CSS seul peut-il styliser un élément en survolant un autre ?

Survoler un élément pour en affecter un autre à l'aide de CSS

Question :

Obtenir un effet CSS en survolant un élément modifier directement l'apparence d'un autre élément à proximité peut être délicat. Malgré les tentatives pour implémenter un tel effet, il reste difficile de savoir si cela est possible uniquement via CSS.

Réponse :

La possibilité d'affecter l'apparence d'un élément en survolant un élément. différents éléments utilisant CSS sont strictement limités. En fait, cela ne peut être fait que si l'élément ciblé est soit un descendant, soit un frère adjacent de l'élément déclencheur.

Éléments descendants :

Si l'élément affecté est imbriqué dans l'élément déclencheur, CSS peut être utilisé pour le manipuler au survol :

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

Ce sélecteur appliquera l'effet aux éléments avec le structure suivante :

<div>

Frères et sœurs adjacents :

Pour les éléments qui sont des frères et sœurs adjacents à l'élément déclencheur, une approche différente est nécessaire :

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

Ce sélecteur ciblera les éléments dans le code HTML suivant structure:

<div>

Limitations:

Dans les deux cas, il est important de noter que ce dernier élément précisé dans le sélecteur est celui qui sera affecté au survol .

Exemple :

Pour un scénario similaire à celui fourni exemple de pseudo-code, la règle CSS suivante pourrait être utilisée :

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

Un exemple démontrant cet effet peut être trouvé dans le JS Fiddle fourni : 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!