javascript - jQuery mouseover/mouseleave event.stopPropagation()

Question

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

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

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

我的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);
    }
);

Updated jsFiddle.