Почему последний список в слайдере не fadeIn / FadeOut / show / hide?

У меня есть easyslider с divs внутри списков, чтобы показывать контент, так что когда я наводил курсор на один список, скрытый div отображается через fadeIn Fadeout JQuery.

Он отлично работает для всего списка, за исключением последнего списка. Где в скрытом контенте просто не отображается. Может кто-нибудь, пожалуйста, помогите?

Думаю, я заметил, что когда я вставляю пустой список после последнего списка, он, похоже, работает. Это единственная работа вокруг этого?

Ссылка на DropBox: https://dl.dropboxusercontent.com/u/7940498/testtes/bb/01Test_X.html

Jsfiddle: http://jsfiddle.net/newbie_ready_to_learn/kQnFj/1/

<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>


<div>
<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>
</div>