Comment puis-je modifier la couleur d'arrière-plan d'un conteneur parent en utilisant uniquement CSS lorsque je survole un élément enfant ?

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 grâce à une approche CSS uniquement.

Événements de pointeur et survol :

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

1. Set pointer-events : aucun 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éfinissez les événements de pointeur : 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;
}

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

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.

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!