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。