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

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

http://jsfiddle.net/qSe6t/1/f

然后,当您从图标和弹出窗口中鼠标拖出时,在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);
});

解决方法:

你需要jquery .stop(true,true)来停止该元素上的所有当前计时器/事件.

我分叉你的小提琴

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

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