如何在一系列图像上的鼠标上显示隐藏的div [英] How to show a hidden div on mouse over on a series of images

问题描述

我有一系列隐藏了div描述的图像.我正在尝试显示悬停事件的描述.我看不到它能正常工作.这是代码.

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>

这是我正在使用的jquery:

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!

推荐答案

尝试一下:

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

jsFiddle示例

jsFiddle example

这篇关于如何在一系列图像上的鼠标上显示隐藏的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！