当前位置：文江博客话题详情

鼠标悬停时在图像上显示信息

发布于 2024-08-31 21:14:30 字数 210 浏览 13 评论 0原文

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

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

有人能给我指出正确的方向或提供示例代码吗？

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情泪▽动烟 2024-09-07 21:14:30

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

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

$(".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();
});

您可以尝试上面的方法code out here

当您将鼠标悬停时，该图像会淡出并在其上方显示

，换行使得

是绝对位于正上方，如果您需要大量包装内容，请为您的 .hover div 提供与图像相同的尺寸...仅取决于正是您想要的外观。

You could do something along these lines:

Wrap your image and the div to display, like this:

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

With CSS like this:

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

And finally, the jQuery using .hover() like this:

$(".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

This fades the image out and displays the <div> above it when you hover, the wrapping is so that the <div> is absolutely positioned directly above the <img>, if you need a lot of wrapping content, give your .hover div the same dimensions as the image...just depends on the exact look you're going for.

回复收藏 0 原文