如何使用jquery显示图像的标题

我想这样做：当鼠标移到一张图片上时，显示它的标题。我使用下面的代码，当我悬停图片时，所有图片的标题都会显示出来。如何更改代码以只显示一个标题

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

$（函数（）{
$（'.image'）。每个（函数（）{
$（此）。悬停(
函数（）{
$（'.title'）.animate（{opacity:1}）
},
函数（）{
$（'.title'）.stop（）.animate（{opacity:0}）；
})
});
});
text1
text2
text3

尝试将此

$（'.title'）

更改为

$（'.title'，this）

---

请参阅：

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

$（文档）.ready（函数（）
{
$（'.image'）.hover（函数（）
{
$（this.search（'p.title:eq（0）'）.stop（）.animate（{opacity:1}）；
}，函数（）{
$（this.search（'p.title:eq（0）'）.stop（）.animate（{opacity:0}）；
});
});
});
text1
text2
text3

这是因为您正在调用所有

.title

元素来设置动画。您必须在与图像相同的

中找到

.title

元素

---

---

实际上，Daniel的答案看起来更好：

这个想法是正确的，但是

.parent（）

是错误的<代码>$（此）。查找（'.title'）。停止…就足够了。或者像Daniel的回答所暗示的那样，$（'title'，this）。。。。或者

$（这个）。儿童（“p”）

为了多样性：）