如何在一系列图像上显示鼠标悬停的div

Question

我有一系列隐藏描述div的图像。我正在尝试显示悬停事件的描述。我看不到让它发挥作用。这是代码。

<div class="peopleImage" id="image1">
    <img src="image1.jpg">
    <div class="peopleInfo">Description goes here</div>
</div>


<div class="peopleImage" id="image1">
    <img src="image1.jpg">
    <div class="peopleInfo">Description goes here</div>
</div>

<div class="peopleImage" id="image1">
    <img src="image1.jpg">
    <div class="peopleInfo">Description goes here</div>
</div>

这是我正在使用的jquery：

$(".peopleImage").hover(function () {
    var peopleInfo = $(this).closest('.peopleInfo');
    peopleInfo.show();
});

似乎没有发生任何事情。任何建议将不胜感激！

Answer 1

试试这个：

$(".peopleImage").hover(function () {
   $('.peopleInfo', this).show();
}, function() {
   $('.peopleInfo', this).hide();
});

<强> jsFiddle example

Answer 2

试

(".peopleInfo").show()

为每个div提供单独的ID，并尝试使用该id调用show（）。

会更好

Answer 3

最近的是获得祖先，你需要找到孩子 - 看看这篇文章：

• http://forum.jquery.com/topic/jquery-is-there-an-opposite-of-closet-selector