如何在鼠标悬停在一系列图像上显示隐藏的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示例

Answer 2

尝试

(".peopleInfo").show()

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

那会更好

Answer 3

最近的是获得祖先，您需要找到孩子-看看这个帖子：

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