jQuery - 懸停不工作與循環

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裏面＃文本1，＃img_container2裏面＃文本2 ...等等懸停鼠標後＃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(); 
    } 
);