Comment puis-je changer la couleur des éléments frères et sœurs en survol à l'aide de CSS ?

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

En HTML, il est courant d'avoir des éléments frères et sœurs, ce qui signifie qu'ils partagent le même élément parent. Lorsque vous survolez un élément spécifique, vous souhaiterez peut-être modifier l'apparence de ses éléments frères. Cependant, CSS a des limites lorsqu'il s'agit de styliser les frères et sœurs précédents.

Solution :

CSS vous permet de cibler les éléments frères qui suivent l'élément survolé. Par exemple :

h1 {
    color: #4fa04f;
}
h1 + a {
    color: #a04f4f;
}

Ce code définit la couleur du premier

en direction du vert et du lien en rouge.

Pour changer la couleur du lien lorsque vous survolez l'icône

en-tête, ajoutez la pseudo-classe :hover :

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

Remarque :

Changer la couleur des frères et sœurs précédents n'est pas possible avec CSS. Si vous souhaitez styliser un frère ou une sœur précédent, envisagez d'utiliser JavaScript ou un framework CSS qui fournit des fonctionnalités supplémentaires.

Exemple avec un élément Wrapper :

Envelopper les éléments dans un conteneur (

) avec un ID ne modifiera pas les règles CSS. Vous suivrez toujours les mêmes principes que ceux décrits ci-dessus :

<div><pre class="brush:php;toolbar:false">#banner h1 {
    color: #4fa04f;
}
#banner h1 + a {
    color: #a04f4f;
}
#banner h1:hover + a {
    color: #4f4fd0;
}