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

Question

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

1. Si mouseover dormir alors pendant quelques secondes.
2. Une fois fait vérifier le sommeil de la souris est toujours sur le même élément.
3. Si cela est vrai alors faire quelque chose.

Comment puis-je obtenir # 2?

Merci.

Answer 1

Jetez un oeil à la hoverIntent plugin pour le jQuery. Il vous donne un nouveau gestionnaire d'événements qui ne se déclenche que si vous avez été planant au-dessus d'un élément pendant un certain laps de temps. En tordant ses options, vous devriez être en mesure d'obtenir à faire exactement ce que vous voulez.

Answer 2

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'));

});

Answer 3

Il suffit d'utiliser un drapeau pour vous dire si la souris est dessus.

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

Answer 4

Voici une façon:

Lorsque vous définissez .hover () sur l'élément, vous pouvez passer 2 fonctions à il. La première se déclenche lorsque la souris est au-dessus de l'élément, le second se déclenche lorsque la souris sort.

La première fonction permet de régler la currentElementId (ou un autre drapeau) et la seconde fonction effacera cela. De cette façon, la seule chose que vous devez faire est de vérifier si currentElementId est vide.

Answer 5

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 modifient un drapeau pour vérifier si la souris reste sur l'élément.

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

Answer 6

J'ai utilisé un lien hypertexte pour afficher un divand puis événement hover je défini la propriété de délai d'attente de cette situation et dès que je vais à mon div-je effacer le délai d'attente et commencer à utiliser la fonction div du hover à fadeOut la div. J'espère que cela vous aidera.

<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>