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

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

Patricia Arquette
Libérer: 2024-12-07 21:22:13
original
397 Les gens l'ont consulté

Can CSS Affect a Sibling Element's Style Based on Another Element's Hover State?

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;
}
Copier après la connexion

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
}
Copier après la connexion

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>
Copier après la connexion
h1 {
  color: #4fa04f;
}
h1:hover + a {
  color: #4f4fd0;
}
a:hover + h1 {
  background-color: #444;  // This won't work
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal