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.

jQuery mouseover / mouseleave event.stopPropagation（）

1 个答案: