图像上的内容框悬停？

Question

我在一个新网站的图库中有一堆图像，我想在用户将鼠标悬停在图像上时显示内容。

例如，如果用户在我的图库中悬停在汽车的图片上，那么低不透明度内容div会淡化整个图像以显示文本，也可能是链接。

我认为这种效果可以通过一些JS甚至CSS Transitions来完成，以实现淡入淡出。

我只需要知道如何在悬停时在图像上显示内容框，可能是80％不透明度。

以下是我心中的一个例子：

感谢您的帮助，如果有人能指出我正确的方向，我们将不胜感激。

如果需要，我可以发布更多信息。

Answer 1

这是一种实现悬停节目并使用jquery隐藏的简单方法。

工作示例：http://jsfiddle.net/va2B8/2/

jQuery（http://jquery.com/）：

$(document).ready(function() {

    $("#Invisible").hide()
    $("#hoverElement").hover(
      function () {
        $('#Invisible').stop().fadeTo("slow", 0.33);
      },
      function () {
        $('#Invisible').stop().fadeOut("slow");
      }
    );

});

html：

<p id="hoverElement">This little piggy will show the invisible div.</p>

<div id="Invisible">This is the content of invisible div.</div>

的CSS：

#Invisible { background: #222; color: #fff; }

编辑：我为工作示例更改了网址，因为我忘了淡出鼠标。

---

---

Edit2：再次更改了网址并更改了代码，因为我在那里有一些额外的代码..加上我想我也可以在那里添加这两个.stop()以便它停止动画如果鼠标悬停或动画正在进行时发生鼠标移出。

（如果没有停止，人们可以进出几次，然后当他停下来时，动画仍会继续运行，直到它完成每个动画多次触发它为止。你可以在这里测试{{ 3}}）

Answer 2

你可以开始使用这个小提琴：

http://jsfiddle.net/Christophe/2RN6E/3/

包含图像和跨度的1 div：

<div class="image-hover">
    <img src="" />
    <span class="desc">text to be displayed when imae hover</span>
</div>

的更新 的

所有这些都可以用CSS完成......

http://jsfiddle.net/Christophe/2RN6E/4/

Answer 3

这是一个简单的jQuery插件，你可以实现：http://file.urin.take-uma.net/jquery.balloon.js-Demo.html

它的工作原理如下：

$(function() {
  $('img').balloon(options);
});

这个jQuery将气球功能应用于页面上的所有图像。这是你的HTML：

<img src="example.png" alt="Here's your caption." />

气球中的文字将是图像的alt属性中的任何内容，以及其他标记的title属性中的任何内容。

Answer 4

我刚刚这样做了：

http://twostepmedia.co.uk

它使用hoverintent jquery插件，因此在用户盘旋后会有250ms的延迟，以避免不稳定的悬停行为。