如何使用jquery隐藏和显示多个图像的图像标题 - How to hide and show image caption for multiple image using jquery?

How to hide and show image caption for multiple image using jquery?

我的结构如下，

<div class="btheme">    
    <a href="/a1"><img src="/a1.jpg" /></a>
    <div class="caption">
         <div>image caption</div>
    </div>   
</div>

<div class="btheme">    
   <a href="/a3"><img src="/a3.jpg" /></a>
   <div class="caption">
       <div>image caption3</div>
   </div>   
</div>

<div class="btheme">    
   <a href="/a2"><img src="/a2.jpg" /></a>
   <div class="caption">
      <div>image caption2</div>
   </div>   
</div>

我在jquery中使用了以下代码来显示/隐藏标题，

<script type="text/javascript">
    jQuery(document).ready(function(){
         jQuery("div.btheme .img").mouseover(function(){
              jQuery(this).parent().find("div.caption").css('display','none');              
         });
         jQuery("div.btheme .img").mouseout(function(){
             jQuery(this).parent().find("div.caption").css('display','block');              
         });                
   });
  </script>

它不起作用？。我该怎么做？.

删除.img前面的点。

此外，要选择标题div，请改用以下内容：

jQuery(this).closest("div.btheme").find("div.caption")...

jQuery(this).parent()会给你错误的锚标签。

更新：这是 jsfiddle 中的工作代码。

只有img不.img

jQuery("div.btheme img").mouseover(function(){
   jQuery(this).parent().next("div.caption").css('display','none');
});
jQuery("div.btheme img").mouseout(function(){
   jQuery(this).parent().next("div.caption").css('display','block');    
});