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

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

2 个答案: