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

时间:2015-09-23 21:48:16

标签: javascript jquery hover

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

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


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

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

4 个答案:

答案 0 :(得分:2)

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

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>

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

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

希望这有帮助。

答案 3 :(得分:0)

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

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