Comment puis-je styliser un élément parent lors du survol d'un enfant sans utiliser de sélecteurs parents ?

Style des éléments parents lors du survol de l'enfant sans sélecteurs parents

Bien que CSS ne dispose pas d'un sélecteur parent dédié, il est toujours possible de styliser les éléments parentaux lorsque l'enfant les éléments sont survolés. Dans ce scénario, nous visons à mettre en évidence un élément conteneur lorsque le bouton Supprimer qu'il contient est survolé.

Considérez le balisage HTML :

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

Sans parent sélecteur, nous pouvons exploiter le concept de pseudo-wrappers pour obtenir l’effet souhaité. En définissant des événements de pointeur : aucun ; sur l'élément parent et les événements de pointeur : auto ; sur un élément enfant (un pseudo-wrapper), nous pouvons créer un mécanisme de déclenchement.

Voici le code CSS pour implémenter cela :

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}

Remarque : Assurez-vous que les éléments enfants avec leur propre les écouteurs d'événements ont des événements de pointeur définis sur auto pour maintenir la fonctionnalité de clic.

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!