Comment puis-je modifier la couleur d'un élément frère lors du survol à l'aide de CSS ?

Susan Sarandon

Libérer： 2024-12-04 02:26:10

original

447 Les gens l'ont consulté

How Can I Change a Sibling Element's Color on Hover Using CSS?

Manipulation des couleurs des éléments frères et sœurs au survol avec CSS

Une façon de modifier l'apparence des éléments HTML consiste à utiliser CSS. Dans cet article, nous explorerons une requête spécifique : changer la couleur des éléments frères lorsque vous les survolez.

Énoncé du problème original

Étant donné le code HTML suivant :

<h1>Heading</h1>
<a class="button" href="#">-</a>

Copier après la connexion

Notre objectif est de modifier la couleur du

lorsque nous survolons l'élément élément utilisant CSS seul.

Interaction entre éléments frères et sœurs

Malheureusement, les sélecteurs frères et sœurs CSS ne peuvent pas affecter les éléments qui les précèdent. Dans l'exemple ci-dessus, le champ

L'élément vient avant l'élément élément, ce qui rend impossible de changer directement sa couleur à l'aide du sélecteur (qui suit immédiatement le frère ou la sœur).

Solution basée sur le conteneur

Une solution de contournement consiste à introduire un div de conteneur parent avec un identifiant :

<div>

Copier après la connexion

Cependant, cela ne fournit pas de connexion directe entre le et l'élément

element.

Approche alternative

Pour surmonter cette limitation, envisagez d'utiliser CSS pour cibler les « prochains frères et sœurs » (éléments qui viennent après un élément spécifié). L'exemple ci-dessous montre comment y parvenir :

h1 {
  color: #4fa04f;
}

h1 + a {
  color: #a04f4f;
}

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

Copier après la connexion

Cela met à jour la couleur du symbole à #a04f4f dans son état par défaut et à #4f4fd0 lorsque nous survolons l'élément

élément.
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!

Comment puis-je modifier la couleur d'un élément frère lors du survol à l'aide de CSS ?

élément.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!

élément.
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!