翻转时在图像上显示信息答案

【问题标题】：Show information over image on rollover翻转时在图像上显示信息
【发布时间】：2011-02-15 05:26:39
【问题描述】：

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

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

谁能指出我正确的方向或提供示例代码

谢谢

【问题讨论】：

标签： jquery css image hover rollover

【解决方案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 与图像的尺寸相同...只是取决于您想要的确切外观。

【讨论】：

很好的答案尼克！ jsfiddle 很棒！
我没有尝试过实现这个，但乍一看它看起来很棒！
如何让图像顶部有 50%（或其他）黑色蒙版，而不是淡出？
@Chris - 你可以给包装的 div 一个黑色的背景，同样的效果:)

【解决方案2】：

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

【讨论】：