У меня есть 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>
Я попытался удалить первый блок, который идет от <li><div id="Cont_All1">
в строке 5 до </div></div></li>
в строке 25, и проблема не произошла.
Таким образом, в коде jQuery нет проблем, но, вероятно, вы забыли закрыть какой-либо тэг или сделать ошибку id
в своем HTML-коде. Итак... Я попытался удалить первый блок, скопировать второй блок и переименовать его с помощью Cont_All1
и HiddenCont1
вместо Cont_All2
и HiddenCont2
и работа выполнена, как вы можете видеть здесь.