Modifier la couleur d'arrière-plan du conteneur parent lors du survol de l'enfant (CSS uniquement)

Alors que la question sur la sélection des éléments parents avec CSS est souvent marquée comme un doublon, il néglige la nécessité de solutions pratiques. En particulier, le problème de la modification de la couleur d'arrière-plan d'un conteneur parent lors du survol de son enfant peut être résolu via une approche CSS uniquement.

Pointer-Events and Hover :

Pour obtenir cet effet, nous pouvons manipuler les événements de pointeur et la pseudo-classe :hover :

1. Set pointer-events: none sur le parent. Cela empêche l'élément parent de recevoir des événements de survol.
2. Définissez le changement de couleur d'arrière-plan parent souhaité en survol.
3. Définir le pointeur- events: auto sur l'enfant. Cela permet à l'élément enfant de déclencher des événements de survol, même si le parent ignore eux.

Exemple :

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

  Anchor Text

Cette solution capture efficacement l'événement de survol sur l'élément enfant, permettant à l'arrière-plan du conteneur parent de changer lorsque l'enfant est survolé, le tout sans utiliser JavaScript.