Jquery HoverIntent working only for the last div

Question

I have 3 main divs:

Div#Cont_All1 with Hidden Div #HiddenCont1

Div#Cont_All2 with Hidden Div #HiddenCont2

Div#Cont_All3 with Hidden Div #HiddenCont3

When i use HoverIntent, It only works for the last div i.e. #Cont_All3 with Hidden Div #HiddenCont3 (Fade In Fade Out only works for this).

Why isn't it working here?Can some one help me.

<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 name is same for all.

function mousein_triger(){

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

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

Change your code to

$(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);
    });
});

^ attribute starts with selector