php - 如何使用 jquery 隐藏和显示多个图像的图像标题？

Question

我有如下结构，

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

这没用？。我怎样才能做到这一点？。

Answer 1

去掉前面的点.img。

此外，要选择标题 div，请改用：

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

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

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

Answer 2

只是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');    
});