圖像懸停在內容框上？

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的延遲，以避免不穩定的懸停行為。