如何使用jquery隱藏和顯示多個圖像的圖像標題？

我有結構如下圖所示，如何使用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>

它不工作？我怎樣才能做到這一點？。

來源

2012-05-02 Ravichandran Jothi

你想顯示在'mouseover'標題或'mouseout'？ –

圖像底部顯示的標題（圖像上方）。 –

我正在談論的事件，而不是位置。順便說一句，我已經添加了一個小提琴與我的答案。 –

刪除.img前的小圓點。

此外，選擇標題DIV，而是使用此：

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

jQuery(this).parent()會給你的錨標記這是錯誤的。

更新： 以下是jsfiddle中的工作代碼。

來源

2012-05-02 05:48:11

工作正常。但是，當我將鼠標懸停在標題上時，它不斷閃爍。有什麼問題？ –

你可以在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');  
});

來源

2012-05-02 05:48:43 thecodeparadox

無法正常工作。 div的名稱相同。那就是問題所在。 –

@Ravichandran檢查我的更新回答 – thecodeparadox

我該如何做這個滑動和滑動這個 –

如何使用jquery隱藏和顯示多個圖像的圖像標題？

回答

相關問題