I have a easyslider with divs within lists to show content, such that when I hover over one list, the hidden <div #HiddenCont1> is displayed via fadeIn Fadeout .
It works fine for all the list except the last list.
Can some one please help ?
One think I have noticed is that when i insert a blank list after the last list, it seems to work.
Is that the only work-around this?
<script>
$(document).ready(function() {
$("#Cont_All1").hover(function(){
$("#HiddenCont1").fadeIn(700);
},function(){
$("#HiddenCont1").fadeOut(900);
});
$("#Cont_All2").hover(function(){
$("#HiddenCont2").fadeIn(700);
},function(){
$("#HiddenCont2").fadeOut(900);
});
$("#Cont_All3").hover(function(){
$("#HiddenCont3").fadeIn(700);
},function(){
$("#HiddenCont3").fadeOut(900);
});
$("#Cont_All4").hover(function(){
$("#HiddenCont4").fadeIn(700);
},function(){
$("#HiddenCont4").fadeOut(900);
});
});
</script>
<li>
<div #Cont_All1>
<div Img>
</div>
Content
<div #HiddenCont1>
</div>
</div>
</li>
<li>
<div #Cont_All2>
<div Img>
</div>
Content
<div #HiddenCont2>
</div>
</div>
</li>
<li>
<div #Cont_All3>
<div Img>
</div>
Content
<div #HiddenCont3>
</div>
</div>
</li>
<li>
<div #Cont_All4>
<div Img>
</div>
Content
<div #HiddenCont4>
</div>
</div>
</li>