Question

我有一个导航，我希望背景遮挡类似于selfridges。

我有基本功能设置here

jQuery的：

jQuery('<div class="backmask"></div>').insertAfter('.wrapper');


function removeBlack() {

jQuery('.nav-container').removeClass('navmask');
jQuery('.backmask').fadeOut(300);

}

function addBlack() {

jQuery('.nav-container').addClass('navmask');
jQuery('.backmask').fadeIn(100);

}

jQuery('.nav li').hover(addBlack, removeBlack);

然而，当你从一个元素鼠标移动到另一个元素时，它会闪烁，而不仅仅是保持黑色背景。

我已经在2个函数中尝试了各种'if'语句，并且我继续进入一个我认为是差不多已经完成的阶段，但之后又失败了。

ps我不想将#nav li改为#nav，因为如果我的导航没有拉伸导航的整个宽度，我不希望人们将鼠标移入空白区域以使背景变黑。

任何想法？我只是缺少一个关键的jquery选择器？例如把所有那些#nav li视为一个元素？

感谢。

＃＃＃编辑

因为mornaner的有用答案现在是我的代码：

jQuery('<div class="backmask"></div>').insertAfter('.wrapper');


function removeBlack() {

jQuery('.nav-container').removeClass('navmask');
jQuery('.backmask').fadeOut(200);

}

function addBlack() {

    jQuery('.nav-container').addClass('navmask');
    jQuery('.backmask').fadeIn(100);

}

jQuery('#pronav li').hover(function(){
 clearTimeout(jQuery(this).data('timeoutId'));
addBlack();
}, function(){
var nav = jQuery('#pronav li');
var timeoutId = setTimeout(function(){
    removeBlack();
}, 80);
//set the timeoutId, allowing us to clear this trigger if the mouse comes back over
nav.data('timeoutId', timeoutId);
});

Answer 1

基于this answer，我做到了：

jQuery('.nav li').hover(function(){
        clearTimeout($(this).data('timeoutId'));
        addBlack();
    }, function(){
        var someElement = $('.nav li');
        var timeoutId = setTimeout(function(){
        removeBlack();
    }, 150);
    //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
    someElement.data('timeoutId', timeoutId);
});

DEMO

你可以调整超时时间，150毫秒对我来说看起来很顺利，但如果觉得它太长，你可以降低它。

导航停电导航鼠标悬停不闪光

1 个答案: