Question

当鼠标滚过图像时，我希望能够在图像上显示信息（基本上是HTML）...我知道有一个.hover() jQuery函数但不确定如何使用它来获取期望的效果。

理想情况下，当用户将鼠标悬停在图像上时，它会“灰显”（例如，50％不透明度为黑色的图层），并带有一些HTML，如标题等等。

有人可以指出我正确的方向或提供示例代码

由于

Answer 1

你可以沿着这些方向做点什么：

将图像和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;
}

最后，使用.hover()的jQuery如下：

$(".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>，如果您需要很多，则<div>绝对位于<img>正上方包装内容，让你的.hover div与图像的尺寸相同......只取决于你想要的确切外观。

Answer 2

如果你正在使用jQuery，你可能需要一个Tooltips插件： http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

在翻转时显示图像信息

2 个答案: