1

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

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

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

谢谢

4

2 回答 2

9

您可以按照以下方式做一些事情：

包装您的图像和要显示的 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();
});

你可以在这里尝试上面的代码

当您悬停时，这会使图像淡出并在其上方显示，<div>包装是这样的在你想要的确切外观上。<div><img>.hover

于 2010-05-03T22:01:10.913 回答
-1

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

于 2010-05-03T21:42:21.197 回答