Question

我的页面上有一个图标，在500毫秒的延迟后弹出一个带有更多细节的连接盒。

然后当您从图标和弹出窗口中鼠标拖出时，在延迟500毫秒后，弹出窗口将被隐藏。

我遇到的麻烦是试图阻止隐藏发生，光标在500毫秒延迟期间重新进入图标/弹出窗口。

这是代码......

<div id="accountIcon">
    <div id="accountPopup"></div>
</div>

CSS：

#accountIcon {
    position:relative;
    height:58px;
    width:80px;
    cursor:pointer;
    background-color:#000;
}
#accountPopup {
    position:absolute;
    top:58px;
    width:400px;
    height:200px;
    background-color:#CCC;
    display:none;
}

jQuery的：

$("#accountIcon").hover(function () {
    $("#accountPopup").delay(500).show(0);
}, function () {
    $("#accountPopup").delay(500).hide(0);
});

Answer 1

你需要jquery .stop（true，true）来停止该元素上的所有当前计时器/事件。

我把你的小提琴分开了

http://jsfiddle.net/qSe6t/3/

$("#accountPopup").stop(true,true).delay(500).hide(0);

Answer 2

var timeout;
$("#accountIcon").hover(function () {
    clearTimeout(timeout);
    $("#accountPopup").delay(500).show(0);
}, function () {
    timeout = setTimeout(function(){
      $("#accountPopup").delay(500).hide(0);
    },500);
});

演示---> http://jsfiddle.net/qSe6t/2/

jquery hover - 如果游标没有重新悬停在元素上，则在延迟后隐藏

2 个答案: