Comment changer la couleur d'arrière-plan d'un parent lors du survol d'un enfant avec CSS ?

Impossible de cibler directement les éléments parents avec CSS

Problème : Comment changer la couleur d'arrière-plan du conteneur parent lorsque vous survolez l'enfant élément utilisant uniquement CSS ?

Solution : Utiliser des événements de pointeur et :hover

Compatibilité :

• IE 11 et Edge
• Chrome
• Firefox

Étapes :

1. Désactiver les événements de pointeur sur le parent div: Cela garantit que le div ignore :hover événements.

div {
  pointer-events: none;
}

2. Modifier l'arrière-plan du parent en survol : Définissez la couleur d'arrière-plan pour qu'elle change lorsque le parent est survolé.

div:hover {
  background: #F00;
}

3. Activer les événements de pointeur sur l'enfant : Cela permet à l'événement de survol de se déclencher uniquement lorsque le l'enfant est survolé.

div > a {
  pointer-events: auto;
}

Explication :

Lorsque l'élément enfant est survolé, le div parent est également survolé à cause de la propriété pointer-events . Cependant, la pseudo-classe de survol du parent est ignorée en raison du paramètre pointer-events: none. En activant les événements de pointeur sur l'enfant, l'événement de survol se déclenche uniquement sur l'enfant, provoquant le changement de la couleur d'arrière-plan du parent comme vous le souhaitez.

Remarque : 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!