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

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

En HTML, les frères et sœurs sont des éléments qui partagent le même élément parent. Lorsque vous survolez des éléments spécifiques, il est souvent souhaitable de modifier l'apparence de leurs éléments frères.

Changer la couleur d'un élément frère suivant

Pour changer la couleur d'un élément frère qui suit l'élément survolé, utilisez le sélecteur de frère adjacent ( ) en CSS. Par exemple, pour changer la couleur d'un lorsque l'élément

l'élément est survolé :

h1 {
  color: #4fa04f;
}

h1 + a {
  color: #a04f4f;
}

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

Limitation : Changer la couleur d'un élément frère précédent

CSS ne fournit pas de moyen direct de modifier le style d'un élément frère précédent élément basé sur l'état de survol de son frère.

Utilisation d'un wrapper Div

Encapsuler les éléments dans un div avec un identifiant vous permet de changer la couleur du frère précédent à l'aide de sélecteurs CSS plus complexes.

<div>

#banner h1 {
  color: #4fa04f;
}

#banner a {
  color: #a04f4f;
}

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

#banner:hover a {
  color: #a04f4f;
}

Cette approche permet pour un meilleur contrôle sur le style des éléments frères, mais cela introduit un balisage supplémentaire et peut être moins efficace.

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!