如何使用jquery顯示圖像的標題

Question

我想這樣做：當鼠標懸停在一張圖片上時，顯示其標題。我使用下面的代碼，當我將圖片懸停時，所有圖片的標題都會顯示出來。如何更改代碼以製作一個標題節目？

<script type="text/javascript">  
     $(function() { 
      $('.image').each(function() { 
       $(this).hover(
        function() { 
         $('.title').animate({ opacity: 1 }) 
        }, 
        function() { 
         $('.title').stop().animate({ opacity: 0}); 
        }) 
       }); 
     }); 
</script> 

<div class="image"><img src="img1" /><p class="title">text1</p></div> 
<div class="image"><img src="img2" /><p class="title">text2</p></div> 
<div class="image"><img src="img3" /><p class="title">text3</p></div> 

Answer 1

嘗試修改此$('.title')到$('.title', this)

參見：http://api.jquery.com/jQuery/

Answer 2

我對我的jQuery有點生疏，但這樣做對你的工作？

<script type="text/javascript">  
    $(document).ready(function() 
    { 
    $('.image').hover(function() 
     { 
     $(this).search('p.title:eq(0)').stop().animate({opacity: 1}); 
     }, function() { 
     $(this).search('p.title:eq(0)').stop().animate({opacity: 0}); 
     }); 
    }); 
    }); 
</script> 

<div class="image"><img src="img1" /><p class="title">text1</p></div> 
<div class="image"><img src="img2" /><p class="title">text2</p></div> 
<div class="image"><img src="img3" /><p class="title">text3</p></div> 

這是因爲你在呼喚所有.title元素的動畫。您必須在圖像中找到與<div>相同的.title元素。

---

事實上，丹尼爾的回答看起來更好：