Question

HI，

我使用以下代码显示li元素内的链接。约束是，一旦鼠标进入li元素，如果它停留在3秒内，则需要显示。一旦我离开李元素，它应该隐藏的非物质性。为此，我正在使用：

var showTimeOut;
var thisElement

$('.user-list li').live('mouseover',function(){

    thisElement = $(this).children('a.copier-link');

    showTimeOut = setInterval(function(){
        thisElement.css({'display':'block'});
    },3000);
})

$('.user-list li').live('mouseleave',function(){
    clearInterval(showTimeOut);
    thisElement.hide();
})

工作正常。但问题是，虽然我只用了一秒钟来交叉li元素，甚至间隔也在调用，并显示链接。但我只需要显示，如果我留在3秒内它需要隐藏在那之后，再次我留下来3秒。

我的代码有什么问题？，否则任何人都给我最好的建议？

感谢。

Answer 1

这只是猜测，但可能与您使用mouseover而不是mouseenter有关。如果mouseover元素中包含子元素，li可以多次触发，这会将间隔设置多次并覆盖showTimeout变量的值。这意味着当mouseleave触发时，只会清除要设置的最后一个间隔。

尝试将mouseover事件更改为mouseenter。我还会考虑将setInterval更改为setTimeout，因为setInterval会设置一个计时器来运行此处每3秒重复一次的函数，不必再次应用.css()。 setTimeout只会调用该函数一次。

另一个想法是始终在clearTimeout之前调用setTimeout，然后你知道两个定时器不能同时运行：

clearTimeout(showTimeout);
showTimeOut = setTimeout(function(){
    thisElement.css({'display':'block'});
},3000);

Answer 2

也许hoverIntent jQuery Plug-In正是您要找的？

hoverIntent是一个尝试的插件确定用户的意图......就像一个水晶球，只有鼠标运动！它的工作原理（并且是源自jQuery的内置悬停。但是，而不是立即它调用了onMouseOver函数等到用户的鼠标变慢在打电话之前已经足够了。

设置/清除间隔问题

2 个答案: