jQuery: la souris est-elle encore sur l'élément?

Je voudrais être en mesure de détecter si la souris est toujours au-dessus de l'élément dans le scénario suivant:

  1. Si la souris puis dormir pendant quelques secondes.
  2. Une fois fait dormir contrôle de la souris est toujours sur le même élément.
  3. Si vrai, alors faire quelque chose.

Comment puis-je obtenir #2?

Merci.

source d'informationauteur thedp

  1. 15

    Prendre un coup d'oeil à la hoverIntent plugin pour jQuery. Il vous donne un nouveau gestionnaire d'événement qui se déclenche uniquement si vous avez été planant au-dessus d'un élément pour un certain laps de temps. En peaufinant ses options, vous devriez être en mesure de lui faire faire exactement ce que vous voulez.

  2. 37

    Cela semble fonctionner (http://jsbin.com/uvoqe)

    $("#hello").hover( function () {
  $(this).data('timeout', setTimeout( function () {

    alert('You have been hovering this element for 1000ms');

  }, 1000));
}, function () {

  clearTimeout($(this).data('timeout'));

});
  3. 10

    Il suffit d'utiliser un indicateur pour vous dire si la souris est au-dessus de lui.

    var mouseover = false;
$('.thing').mouseenter(function(){
    mouseover = true;
}).mouseleave(function(){
    mouseover = false;
});
  4. 2

    Voici un moyen:

    Lorsque vous définissez .hover() sur l'élément, vous pouvez passer 2 fonctions. Le premier se déclenche lorsque la souris est au-dessus de l'élément, le deuxième se déclenche lorsque la souris se déplace.

    La première fonction peut définir la currentElementId (ou drapeau) et la deuxième fonction claire. De cette façon, la seule chose que vous devez faire est de vérifier si currentElementId est vide.

  5. 1

    Vous pouvez utiliser setTimeout( 'sleep', sleep_time ) pour appeler une fonction après un temps défini.

    Assigner des gestionnaires d'événements onmouseover et onmouseout.

    Ces gestionnaires de modifier un indicateur pour vérifier si la souris reste sur l'élément.

    À l'intérieur de la fonction de veille, vous pouvez vérifier le drapeau, et juste retour.

  6. 1

    J'ai utilisé un lien hypertexte pour afficher une divpuis sur hover cas je définir le délai d'attente de la propriété de ce et dès que je vais à mon div j'ai effacer le délai d'attente et de commencer à utiliser le div's hover fonction de fadeout la div. J'espère que cela va vous aider.

    <script type="text/javascript">
    $(document).ready(function () {
        var obj;
        $("a").hover(function () {
            if ($("#div1").is(":hidden")) {
                $("#div1").fadeIn(300).show();
            }
        }, function () {
            obj = setTimeout("jQuery('#div1').fadeOut(300);", 300);
        });

        $("#div1").hover(function () {
            clearTimeout(obj);
            if ($("#div1").is(":hidden")) {

                $("#div1").show();
            }
        }, function () {
            jQuery('#div1').fadeOut(300);
        });
    });
</script>