如何在鼠標懸停在一系列圖像上顯示隱藏的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