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

Question

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

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


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

当然，我不会将其与警报一起使用；）我不知道该怎么做。悬停在悬停？还是用别的东西？谢谢你的帮助，对不起我的英语。

Answer 1

你几乎成功了。 jquery 悬停函数采用两个参数，一个是 onHoverStart（或 onMouseOver）处理程序，一个是 onHoverStop（或 onMouseLeave）处理程序。您只需将警报添加到 onHoverStop 处理程序。

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

Answer 2

两个块都需要超时，enter/leave，如下所示：

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 3

Working fiddle.

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

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);
        });
    })();

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

Show and hide content on hover with delay

javascript

jquery

hover