Question

i have structure like below,

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

i used below code for show / hide caption in 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>

it does not work?. how can i do this?.

Answer 1

Remove the dot in front of .img.

Also, for selecting the caption div, use this instead:

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

jQuery(this).parent() will give you the anchor tag which is wrong.

Update:
Here is the working code in jsfiddle.