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

Changer la couleur d'arrière-plan du conteneur parent lors du survol de l'enfant à l'aide de CSS

Beaucoup peuvent suggérer au départ que CSS manque de moyens pour cibler les éléments parents, mais le problème La modification de la couleur d'arrière-plan d'un conteneur parent lors du survol d'un enfant peut être résolue avec une solution intelligente.

Solution CSS utilisant pointer-events et :hover

Pour obtenir l'effet souhaité, créez trois règles CSS :

1. Définissez pointer-events: none sur le div parent pour qu'il ne réponde plus événements de survol.
2. Définissez le changement de couleur d'arrière-plan pour le parent dans le parent-div:hover sélecteur.
3. Définissez pointer-events: auto sur l'élément enfant pour activer le déclenchement de l'événement de survol lorsque l'enfant est survolé.

Cette approche fonctionne car l'événement de survol parent est activé lorsqu'il est survolé. l'enfant est survolé, tandis que le parent ignore sa pseudo-classe de survol, permettant à l'événement de survol d'être déclenché uniquement sur le enfant.

Exemple

div {
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
}

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

Compatibilité

Cette solution est compatible avec IE 11 et Edge, Chrome et Firefox. Cependant, dans IE 11 et Edge, l'élément enfant doit avoir display: inline-block ou display: block pour que les événements de pointeur fonctionnent correctement.

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!