Question

我有一个包含图片的可变数量的div。
当PHP完成工作时 - HTML代码如下：

<div id="img_container1" class="count"><div id="text1" class="text">Example1</div></div>
<div id="img_container2" class="count"><div id="text2" class="text">Example2</div></div>
<div id="img_container3" class="count"><div id="text3" class="text">Example3</div></div>
.
.
.

我想要做的是在＃img_container1里面显示＃text1，在＃img_container2里面显示#text2 ...等等，将鼠标悬停在＃img_container *之后，但我的脚本不起作用。
jQuery脚本：

$(document).ready(function(){

        var count = $('.count').size(); 
        for ( var i = 1; i <= count; i++ )
        {
            $("#img_container" + i).hover(function()
            {
                $("#text" + i).fadeToggle();
            });
        } });

当我将鼠标悬停在任何＃img_container上时*没有任何内容

CSS代码：

.count
{
position:relative;
border: 2px solid #C3BEC1;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
height: 200px;
width: 150px;
margin: 50px 0 0 48px;
}
.text
{
position: absolute;
bottom: 0; 
left: 0;
width: 140px;
display:none;
}

Answer 1

为什么不：

$( ".count" ).hover(
     function() {
          $( this ).find( ".text" ).show();
     }, function() {
          $( this ).find( ".text" ).hide();
     }
);

jQuery - 悬停不适用于for循环

1 个答案: