Question

所以我试图使用hoverIntent重构一些jQuery鼠标。当我为每个导航项单独调用hoverIntent时，Everthing工作，但当我尝试使用以下代码时，第一次鼠标悬停没有任何反应，然后它可以工作：

$('.navItem1').on('hover', function(){
    navHoverIntent(this);
});

$('.navItem2').on('hover', function(){
    navHoverIntent(this);
});

$('.navItem3').on('hover', function(){
    navHoverIntent(this);
});

$('.navItem4').on('hover', function(){
    navHoverIntent(this);

});

function navHoverIntent(className) {
//set some vars for use in hoverIntent
var currentDiv = $(className); 
var cubeImg = currentDiv.find('img');
var childDivs = currentDiv.find('div'); 
var navTitle = childDivs[0]; 
var subNav = childDivs[1]; 
//now calling hoverIntent

currentDiv.hoverIntent({
    over: function(){
        if(cubeImg.css("display")=="block"){
        navTitle.css("color","#262261");
        }
        currentDiv.css("backgroundColor","#d7d7d7");
        $(subNav).show();
        },
    out: function(){
        if(cubeImg.css("display")=="block"){
        navTitle.css("color","#8CC640");
        currentDiv.css("backgroundColor","#262261");
        }else{
        currentDiv.css("backgroundColor","transparent");
        $("#subnav1").hide();
        $("#subnav2").hide();
        $("#subnav3").hide();
        $("#subnav4").hide();
        }
        },

    });
}

非常感谢任何帮助！

Answer 1

如果你仍然需要一个答案，我可以看到你的问题是，在第一个悬停时你正在添加事件监听器（但它也没有被触发）。

此外，您还要在每个悬停上添加一个新的事件侦听器，而不删除旧的事件侦听器。

如果这不是预期的行为，您可以自己为每个“ navItem ”调用该函数，并将其从悬停中删除。

希望有所帮助

hoverIntent不能在第一次悬停时工作

1 个答案: