Maison > interface Web > tutoriel CSS > Comment puis-je empêcher les événements « onmouseout » prématurés sur des divisions en position absolue avec des éléments enfants ?

Comment puis-je empêcher les événements « onmouseout » prématurés sur des divisions en position absolue avec des éléments enfants ?

Barbara Streisand
Libérer: 2024-12-02 16:46:12
original
1085 Les gens l'ont consulté

How Can I Prevent Premature `onmouseout` Events on Absolutely Positioned Divs with Child Elements?

Empêcher l'événement Mouseout lors du survol d'un élément enfant d'une division absolue

Problème :

Lors du survol d'un élément enfant dans un div en position absolue, l'événement onmouseout pour le div se déclenche prématurément. Cela se produit en raison du bouillonnement d'événements, où les événements des éléments enfants se propagent à leurs éléments parents.

Solution : sans jQuery

Pour empêcher l'événement onmouseout de se déclencher lors du survol des éléments enfants , utilisez plutôt l'événement onmouseleave. Voici un exemple :

<div class="outer" onmouseleave="yourFunction()">
    <div class="inner">
    </div>
</div>
Copier après la connexion

Solution : Avec jQuery

jQuery fournit l'événement mouseleave(), qui accomplit la même fonctionnalité :

$(".outer").mouseleave(function(){
    //your code here
});
Copier après la connexion

Comment ça marche :

L'événement onmouseleave ne déclenche que lorsque la souris quitte l'élément spécifié. En utilisant cet événement sur le div parent, cela garantit que l'événement mouseout ne se déclenchera que lorsque la souris quittera complètement le div, même si elle survole des éléments enfants.

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