How to show a hidden div on mouse over on a series of images

Question

I have a series of images which have a description div hidden. I'm trying to show the description on a hover event. I can't see to get it to work. Here's the code.

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

Here's the jquery I'm working with:

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

Nothing seems to happen. Any suggestions would be appreciated!

Answer 1

Try this:

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

jsFiddle example

Answer 2

try

(".peopleInfo").show()

Give sepearte id for each div and try to call show() with that id.

that will be better

Answer 3

Closest is getting the ancestors, you need to find children - look at this post:

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