Comment puis-je styliser un élément parent lorsque son élément enfant est survolé ?

Style des éléments parents avec les survols d'éléments enfants

Il est courant d'appliquer des styles à un élément parent lorsqu'une action spécifique, telle que en survol, se produit sur un élément enfant. Cependant, CSS ne fournit pas de sélecteur de parents natif. Néanmoins, il existe des moyens créatifs d'obtenir cette fonctionnalité sans un tel sélecteur.

Utilisation de pseudo-éléments

Une approche consiste à utiliser des pseudo-éléments pour créer un wrapper autour du parent élément. Ce pseudo-élément wrapper peut avoir une propriété pointer-event définie sur auto, permettant aux événements de souris de le traverser. L'élément parent, en revanche, peut avoir la propriété pointer-event définie sur none. Cela garantit que le survol de l'élément enfant déclenche l'événement de souris sur le pseudo-élément wrapper au lieu de l'élément parent. En appliquant des styles de survol au pseudo-élément wrapper, vous pouvez les appliquer efficacement à l'élément parent lorsque l'élément enfant est survolé.

Exemple de code :

div.parent {
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}

<div class="parent">
    parent - you can hover over here and it won't trigger
    <div class="child">hover over the child instead!</div>
</div>

Notes supplémentaires :

• La propriété pointer-events n'est pas pris en charge par tous les navigateurs, il est donc essentiel d'utiliser des préfixes de navigateur (par exemple, -webkit-pointer-events) pour des raisons de compatibilité.
• Cette technique peut être appliquée à n'importe quel scénario dans lequel vous devez styliser un élément parent en fonction sur les interactions des éléments enfants, telles que la modification de la visibilité des éléments ou le déclenchement d'animations.

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!