Styler les éléments parents lors du survol des enfants sans sélecteur de parents
En CSS, cibler directement les éléments parents en fonction des interactions des enfants est un défi en raison de absence de sélecteur de parents. Cependant, il existe une solution de contournement astucieuse qui nous permet d'obtenir cet effet : créer un pseudo wrapper au sein de l'élément parent.
Considérez l'exemple donné, où un bouton de suppression met en surbrillance sa section parent au survol :
<div> <p>Lorem ipsum ...</p> <button>Delete</button> </div>
Pour mettre en évidence la section parent, nous allons créer un div enfant avec des événements de pointeur définis sur auto, tout en le désactivant pour le parent :
div.parent { pointer-events: none; } div.child { pointer-events: auto; }
Maintenant, le parent devient transparent aux événements de la souris, permettant au div enfant de déclencher des effets de survol. Et lorsqu'un événement de survol se produit sur l'enfant, nous pouvons styliser le parent comme nous le souhaitons :
div.parent:hover { background: yellow; }
Cette technique garantit que l'élément parent répond aux interactions de survol sur son enfant, simulant efficacement le comportement d'un sélecteur parent. Notez que pointer-events: auto doit être restauré pour les autres éléments enfants avec des écouteurs d'événements afin de conserver leur fonctionnalité.
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!