jquery - jQuery：鼠标还在元素上吗？

Question

我希望能够在以下情况下检测鼠标是否仍在元素上方：

1. 如果鼠标悬停，则休眠几秒钟。
2. 一旦完成鼠标的睡眠检查，仍然在同一个元素上。
3. 如果是真的，那就做点什么。

我怎样才能达到#2？

谢谢你。

Answer 1

这似乎工作（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 2

看看 jQuery 的hoverIntent插件。它为您提供了一个新的事件处理程序，仅当您将鼠标悬停在某个元素上一定时间时才会触发。通过调整它的选项，你应该能够让它完全按照你的意愿去做。

Answer 3

只需使用一个标志来告诉您鼠标是否在它上面。

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

Answer 4

这是一种方法：

当您在元素上设置.hover()时，您可以将 2 个函数传递给它。第一个将在鼠标悬停在元素上时触发，第二个在鼠标移出时触发。

第一个函数可以设置currentElementId（或其他标志），第二个函数将清除它。这样，您唯一需要做的就是检查是否currentElementId为空白。

Answer 5

我使用一个超链接来显示一个div，然后在hover事件上我设置了这个的超时属性，一旦我去我的div我清除超时并开始使用div'shover函数来淡出div. 我希望这能帮到您。

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

Answer 6

您可以setTimeout( 'sleep', sleep_time )在设定的时间后调用函数。

将事件处理程序分配给 onmouseover 和 onmouseout。

这些处理程序修改标志以检查鼠标是否仍在元素上。

在 sleep 函数内部，您可以检查标志，然后将其返回。