图像悬停在内容框上？

Question

我在新网站im建筑物的图库中有一堆图像，并且Im希望当用户将鼠标悬停在图像上时显示内容。

例如，如果用户将鼠标悬停在我的画廊中的汽车图片上，则不透明度较低的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() ，以便停止动画。动画正在进行。

（如果没有停止，则可以将鼠标悬停几次，然后停止时，动画仍会继续运行，直到完成每个动画触发次数为止。您可以在此处进行测试， 网址为http：// jsfiddle .net / va2B8 / 1 / ）

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的延迟，以避免不稳定的悬停行为。