Puis-je styliser un élément parent lors du survol d'un élément enfant en CSS ?

Style des éléments parents sur le survol d'un élément enfant

Question : Est-il possible de modifier l'apparence d'un élément parent en survolant un élément enfant, même sans sélecteur parent dédié dans CSS ?

Contexte : Considérons un scénario avec un bouton "Supprimer". Lorsque l'utilisateur déplace le curseur sur le bouton, nous souhaitons mettre en évidence la section parent dans laquelle il est contenu.

Réponse :

Bien qu'un véritable sélecteur parent n'existe pas en CSS, il existe des méthodes pour obtenir l'effet souhaité en utilisant les couches en cascade (z-index) ou pseudo-wrappers.

Méthode pseudo-wrapper :

Cette méthode consiste à créer un élément pseudo-wrapper qui agit comme un calque invisible au-dessus du parent. Lorsque la souris survole l'élément enfant, elle interagit avec le pseudo-wrapper, qui à son tour déclenche des modifications CSS sur le parent.

Code :

div.parent {
  z-index: 0;
}

div.child {
  z-index: 1;
  pointer-events: auto;
}

div.child:hover + div.parent {
  background-color: yellow;
}

Explication :

• Nous attribuons un indice z faible au parent, garantissant qu'il est en dessous de l'enfant.
• L'enfant a un z-index plus élevé et des événements de pointeur définis sur auto, permettant aux événements de la souris de passer à travers.
• Lorsque l'enfant est survolé, le sélecteur de frère ou sœur adjacent ( ) cible le parent et applique une couleur de fond jaune.

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!