jQuery 悬停 - 如果光标未重新悬停在元素上，则延迟后隐藏

Question

我的页面上有一个图标，在 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;
}

j查询：

$("#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/