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

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

Bien qu'il soit généralement impossible de cibler les éléments parents directement avec CSS , il existe des solutions de contournement pour des scénarios spécifiques. Un de ces scénarios consiste à changer la couleur d'arrière-plan d'un conteneur parent lorsque vous survolez son élément enfant.

Solution : événements de pointeur et :hover

Cette méthode exploite les événements de pointeur et la pseudo-classe :hover :

1. événements de pointeur : aucun sur parent : Cela rend l'élément parent non interactif, ignorant les événements de survol.
2. :survoler le parent : Définissez le changement de couleur d'arrière-plan souhaité sur l'élément parent lors du survol.
3. pointer-events : auto on child : Réactivez les événements de survol uniquement pour les éléments enfants, leur permettant ainsi de déclencher le changement de couleur d'arrière-plan sur le parent.

Compatibilité :

• Fonctionne dans IE 11 et Edge, Chrome et Firefox.
• Remarque : IE 11 et Edge exigent que l'élément enfant ait display: inline-block ou affichage : bloquer pour que les événements de pointeur fonctionnent.

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>

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!