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元素进行动画处理。您必须在与图像相同的.title内找到<div>元素。

实际上，丹尼尔的答案看起来更好：

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

2 个答案: