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

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:

$(".peopl开发者_高级运维eImage").hover(function () {
    var peopleInfo = $(this).closest('.peopleInfo');
    peopleInfo.show();
});

Nothing seems to happen. Any suggestions would be appreciated!

Try this:

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

jsFiddle example

try

(".peopleInfo").show()

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

that will be better

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