jquery - Jquery HoverIntent 仅适用于最后一个 div

Question

我有3个主要的div：

Div#Cont_All1 与隐藏的 Div #HiddenCont1

Div#Cont_All2 与隐藏的 Div #HiddenCont2

Div#Cont_All3 与隐藏的 Div #HiddenCont3

当我使用 HoverIntent 时，它仅适用于最后一个 div 即 #Cont_All3 与 Hidden Div #HiddenCont3 （淡入淡出仅适用于此）。

为什么它在这里不起作用？有人可以帮助我吗？

<script>
$(document).ready(function() {


  $("#Cont_All1").hoverIntent(mousein_triger , mouseout_triger);
function mousein_triger(){

 $("#HiddenCont1").fadeIn(700);
}
function mouseout_triger() {

 $("#HiddenCont1").fadeOut(900);
};

 $("#Cont_All2").hoverIntent(mousein_triger , mouseout_triger);
function mousein_triger(){

 $("#HiddenCont2").fadeIn(700);
}
function mouseout_triger() {

 $("#HiddenCont2").fadeOut(900);
};

$("#Cont_All3").hoverIntent(mousein_triger , mouseout_triger);
function mousein_triger(){

 $("#HiddenCont3").fadeIn(700);
}
function mouseout_triger() {

 $("#HiddenCont3").fadeOut(900);
};

});
</script>

Answer 1

函数名称对所有人都是相同的。

function mousein_triger(){

 $("#HiddenCont3").fadeIn(700);
}
function mouseout_triger() {

 $("#HiddenCont3").fadeOut(900);
};

将您的代码更改为

$(document).ready(function () {
    $("div[id^=Cont_All]").hoverIntent(function () {
        $("#HiddenCont" + this.id.replace('Cont_All', '')).fadeIn(700);
    },

    function () {
        $("#HiddenCont" + this.id.replace('Cont_All', '')).fadeOut(900);
    });
});

^ 属性以选择器开头