我在div中有图像,我希望使用jQuery将段落显示在鼠标悬停的顶部。段落最初是隐藏的。在图像上显示段落mouseover
我试过以下方法,但不能让该段落只在我将鼠标悬停在一张图片上时,才会出现在该图片上。
HTML:
<div id="photos">
<div class="test">
<img src="http://www.blset.com/img/300x200/biostat300200.jpg" />
<p class="desc">Test 1</p>
</div>
<div class="test">
<img src="http://www.blset.com/img/300x200/barometre1300200.jpg" />
<p class="desc">Test 2</p>
</div>
</div>
CSS:
#photos {position:relative;width:100%;height:100%;background:#ccc;}
#photos img {float:left;height:120px;}
#photos p {display:none; position:absolute;top:0;left:0;}
的jQuery:
$(".test img").hover(function() {
$(".test p").fadeIn(200);
}, function() {
$(".test p").fadeOut(200);
});
的jsfiddle:http://jsfiddle.net/m7zFb/13/
非常感谢你,这个伎俩。我现在要阅读关于next()和e.target的更多信息。 – Chris 2012-04-07 01:45:27
当然 - 还有一个注意事项,你可以使用'$(this)'代替'$(e.target)' - 我只是习惯于使用'e.target' ... – 2012-04-07 01:46:19