Question

我需要做一件事。我在网站上有元素。当用户将鼠标悬停在此项目上时，我需要显示警报。但是有延迟：当用户将鼠标悬停在项目上并且一秒钟鼠标仍在项目上时，将显示警报。我可以这样做，但是我想在鼠标离开相同的项目时做同样的事情（当鼠标离开项目和一秒钟之后仍然在项目之外）。现在我使用这段代码，但当然它离开了

$('.test').hover(function(){
  mytimeout = setTimeout(function(){
    alert("enter");
  }, 1000);
}, function(){
     clearTimeout(mytimeout);
});


$('.test').mouseleave(function() {
  alert("escape");
});

当然我不会在警报中使用它;）我不知道该怎么做。悬停在悬停？还是用别的东西？感谢您的帮助，对不起我的英语。

Answer 1

你需要在两个区块中超时，进入/离开，如下所示：

var $demo = $("#demo");
var timer;

$('.test').hover(function() {
    //Clear timeout just in case you hover-in again within the time specified in hover-out
    clearTimeout(timer);
    timer = setTimeout(function() {
        $demo.text("enter");
    }, 1000);
}, function() {
    //Clear the timeout set in hover-in
    clearTimeout(timer);
    timer = setTimeout(function() {
        $demo.text("exit");
    }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="test">Hover me!</button>

<div id="demo"></div>

Answer 2

你几乎拥有它。 jquery悬停函数接受两个参数：onHoverStart（或onMouseOver）处理程序和onHoverStop（或onMouseLeave）处理程序。您只需将警报添加到onHoverStop处理程序。

$('#test').hover(function(){
  setTimeout(function(){
    alert("enter");
  }, 1000);
}, function(){
  setTimeout(function(){
    alert("escape");
  }, 1000);
});

Answer 3

<强> Working fiddle

如果您愿意，可以在mouseleave中遵循相同的想法，只需在timer_mouseleave事件中清除计时器hover：

var timer_mouseleave;

$('.test').hover(function(){
      clearTimeout(timer_mouseleave);

      mytimeout = setTimeout(function(){
        alert("enter");
      }, 2000);
}, function(){
     clearTimeout(mytimeout);
});

$('.test').mouseleave(function() {
      timer_mouseleave = setTimeout(function(){
        alert("escape");
      }, 2000);
});

希望这有帮助。

Answer 4

试试这个。只需要在每个悬停事件中重置超时。

(function(){
        var mytimeout = null;
        $('.test').hover(function(){
            clearTimeout(mytimeout);
            mytimeout = setTimeout(function(){
                alert("enter");
            },1000);
        });
    })();

在延迟时显示和隐藏悬停内容

4 个答案: