jQuery mouseover/mouseleave event.stopPropagation()

Question

我设置了一个简单的导航菜单 - 有三个主要链接，如果您将鼠标悬停在"工作"链接上，导航菜单上会覆盖"作品"列表。

我

设置了一个简单的jsFiddle来向您展示我所拥有的：http://jsfiddle.net/gM73q/2/

我遇到的一个问题是，如果您将鼠标悬停在标题"工作"（激活子菜单）上，然后重新悬停在"工作"上，菜单会淡入和淡出。这显然是正确的行为（因为单词"工作"的 z 索引高于菜单），但我希望能够将鼠标悬停在"工作"上并且菜单仍然存在。

我的JS如下：

$('.site-menu-container ul li:first-child a').on('mouseover', function(event) {
    event.stopPropagation();
    $('.site-menu-container .work-menu-container').fadeIn();
}); 
$('.site-menu-container .work-menu-container').on('mouseleave', function(event) {
    $(this).fadeOut();
});

有什么想法吗？我确定我必须使用event.stopPropagation()但不确定如何使用。

谢谢R

Answer 1

您可以使用 setTimeout 来延迟菜单淡出：

var hoverTimeout;
$('.site-menu-container ul li:first-child a').on('mouseover', 
    function (event) {
        if(hoverTimeout){
            clearTimeout(hoverTimeout);   
        }
        event.stopPropagation();
        $('.site-menu-container .work-menu-container').fadeIn();
    }
);
$('.site-menu-container .work-menu-container').on('mouseleave', 
    function (event) {
        hoverTimeout = setTimeout($.proxy(function(){
            $(this).fadeOut();
        }, this),500);
    }
);

更新了 jsFiddle。