Maison > interface Web > tutoriel CSS > Comment empêcher l'effet de survol d'un élément parent de se déclencher lors du survol d'un élément enfant ?

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

Susan Sarandon
Libérer: 2024-11-03 04:05:31
original
353 Les gens l'ont consulté

How to Prevent a Parent Element's Hover Effect from Triggering When Hovering Over a Child Element?

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;
}
Copier après la connexion

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>
Copier après la connexion

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
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal