Comment empêcher l'effet de survol d'un élément parent de se déclencher lors du survol d'un élément enfant ?

Effet de survol sur les éléments parents et enfants

Pour relever le défi de la désactivation de l'effet de survol d'un élément parent lorsque le curseur se déplace sur un enfant imbriqué élément, considérons la solution suivante :

CSS :has Selector (introduit en 2024)

Avec l'introduction du CSS :has selector, vous pouvez directement styliser un élément parent en fonction de l'état de survol de son enfant. Par exemple :

.parent:has(.child:hover) {
    background: normal;
}

Ce code garantit que lorsque le curseur survole l'élément enfant avec la classe « enfant », la couleur d'arrière-plan de l'élément parent avec la classe « parent » revient à son état d'origine.

Astuce de l'élément frère

Avant le sélecteur :has, une solution de contournement consistait à utiliser un élément frère :

<div class="parent">
    <div class="sibling"></div>
    <div class="child"></div>
</div>

L'élément frère est positionné en utilisant le positionnement absolu pour chevaucher l’élément enfant. Lorsque vous survolez l'élément enfant, l'effet de survol de l'élément frère est activé, remplaçant l'effet de survol de l'élément parent.

.child:hover ~ .sibling {
    background: #FFF; // Override parent's background color
}

Limitations

Notez que ces solutions dépendent sur la structure des éléments imbriqués et peut ne pas fonctionner dans tous les cas.

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!