1

你好，

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

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

我的代码有什么问题吗？还有人给我最好的建议吗？

谢谢。

4

2 回答 2

1

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

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

另一个想法是总是调用clearTimeoutbefore setTimeout，然后你知道两个计时器不能同时运行：

clearTimeout(showTimeout);
showTimeOut = setTimeout(function(){
    thisElement.css({'display':'block'});
},3000);
于 2010-04-27T09:51:03.363 回答
0

也许hoverIntent jQuery 插件是您正在寻找的？

hoverIntent 是一个试图确定用户意图的插件......就像一个水晶球，只有鼠标移动！它的工作方式类似于（并且源自）jQuery 的内置悬停。但是，它不会立即调用 onMouseOver 函数，而是等到用户的鼠标速度足够慢后再进行调用。

于 2010-04-27T09:47:57.160 回答