Comment puis-je modifier la couleur d'arrière-plan d'un parent lors du survol d'un enfant à l'aide de CSS ?

Changement de la couleur d'arrière-plan du conteneur parent lors du survol de l'enfant avec CSS

La question de savoir comment modifier la couleur d'arrière-plan de l'élément parent lorsque son enfant est survolé est courant. En règle générale, ce type de question est considéré comme un double de la question visant à savoir si CSS prend en charge les sélecteurs parents.

Bien qu'il soit vrai que CSS n'offre pas de sélecteurs parents directs, il existe des solutions CSS qui peuvent répondre à ce problème spécifique.

Utilisation des événements de pointeur et :hover

Cette technique implique trois étapes :

1. Appliquer la propriété pointer-events: none à l'élément parent. Cela obligera le parent à ignorer les événements de survol.
2. Définissez le changement de couleur d'arrière-plan pour l'élément parent en survol : parent:hover { background: #F00; >
3. Définissez les événements de pointeur : auto sur l'élément enfant. Cela garantit que seul l'enfant déclenche des événements de survol, affectant ainsi indirectement le parent.

Comment ça marche :

• Lorsque l'enfant est survolé, le parent est également survolé en raison du bouillonnement d'événements.
• Cependant, la propriété pointer-events: none du parent l'empêche de répondre à sa propre pseudo-classe de survol.
• Étant donné que l'enfant a des événements de pointeur : auto, il active efficacement le bouillonnement d'événements et déclenche le survol du parent.

Exemple :

div {
  height: 200px;
  width: 200px;
  text-align: center;
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
  display: inline-block;
}

<div>
  <h1>Heading</h1>
  <a href="#">Anchor Text</a>
</div>

Cette solution est compatible avec les navigateurs dont IE 11, Edge, Chrome et Firefox. Pour IE 11 et Edge, l'élément enfant doit avoir display: inline-block ou display: block pour activer les événements de pointeur.

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!