Comment changer la couleur des éléments frères et sœurs en survol avec CSS ?

Comment changer sélectivement la couleur des frères et sœurs avec le survol CSS

Lorsque vous survolez un élément, certaines techniques CSS peuvent être utilisées pour modifier l'apparence de ses éléments voisins.

Ciblage ultérieur Frères et sœurs

L'utilisation d'un signe " " dans votre sélecteur CSS vous permet de cibler l'élément qui suit immédiatement l'élément sur lequel vous survolez. Par exemple, le code suivant change la couleur d'un élément "a" lorsque l'élément "h1" précédent est survolé :

h1:hover + a { color: #4f4fd0; }

Ciblage des frères et sœurs précédents

Cependant , CSS a des limites lorsqu'il s'agit de cibler les frères et sœurs précédents. Pour obtenir un effet similaire, vous devrez envelopper les éléments dans un conteneur parent et utiliser le sélecteur frère général "~" pour cibler l'élément souhaité. Cependant, cette méthode peut ne pas toujours produire le résultat souhaité.

#banner h1:hover ~ a { color: #4f4fd0; }

Exemple de scénario

Considérez le balisage HTML suivant :

<h1>

Pour changer la couleur de l'élément "a" lorsque le "h1" avec l'identifiant "titre" est survolé, vous pouvez utiliser la commande suivante CSS :

#title:hover + .button { color: #4f4fd0; }

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!