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

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

DDD
DDDoriginal
2024-12-10 08:07:16338parcourir

How to Change the Color of Sibling Elements on Hover with 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn