在翻转时显示图像信息

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;
}

最后,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>,如果你需要大量的包装内容,给你的.hoverdiv与图像的尺寸相同...只是取决于关于你想要的确切外观.