滚动时在图像上显示信息

你可以这样做:

将图像和div包装起来显示,如下所示:

<div class="imgHover">
    <div class="hover">Test Content for the hover</div>
    <img src="myImage.jpg" alt="" />
</div>

使用这样的css:

.imgHover .hover { 
    display: none;
    position: absolute;
    z-index: 2;
}

最后,jquery使用 .hover() 这样地:

$(".imgHover").hover(function() {
    $(this).children("img").fadeTo(200, 0.25)
           .end().children(".hover").show();
}, function() {
    $(this).children("img").fadeTo(200, 1)
           .end().children(".hover").hide();
});

You can try the above code out here

这将淡出图像并显示 <div> 当你悬停在上面时,包装是这样的 <分区> 绝对位于 <img> ,如果需要大量包装内容,请 .hover div与图片的尺寸相同…只是取决于你想要的确切外观。

如果仍在使用jquery,则可能需要一个工具提示插件: http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/