CSS peut-il affecter le style d'un élément frère en fonction de l'état de survol d'un autre élément ?

Interaction entre frères et sœurs avec CSS Hover

Dans la conception Web, vous pouvez rencontrer des scénarios dans lesquels vous souhaitez modifier l'apparence des frères et sœurs d'un élément en fonction de son état de survol. Cependant, il existe une limitation à cette fonctionnalité dans CSS.

Changer la couleur d'un frère au survol

Si vous avez des éléments adjacents et que vous souhaitez changer la couleur d'un frère suivant lorsque le premier élément (généralement positionné avant le frère) est survolé, c'est possible en utilisant CSS. Par exemple, vous pouvez modifier la couleur d'un lien "a" lorsqu'un en-tête "h1" au-dessus est survolé.

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

Limitations

Cependant, vous ne peut pas affecter la couleur d’un frère ou d’une sœur précédent de la même manière. Si vous avez un titre "h1" suivi d'un lien "a" et que vous souhaitez changer la couleur du titre lorsque vous survolez le lien, cela n'est pas réalisable avec CSS.

a:hover + h1 {
  background-color: #444;  // This won't work
}

Interaction entre frères et sœurs CSS Exemple

Voici un exemple illustrant les interactions CSS possibles et impossibles dans ce contexte :

<h1>Heading</h1>
<a class="button" href="#">The "Button"</a>
<h1>Another Heading</h1>

h1 {
  color: #4fa04f;
}
h1:hover + a {
  color: #4f4fd0;
}
a:hover + h1 {
  background-color: #444;  // This won't work
}

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!