圖像懸停的內容框？

我在一個新建的網站im建築物中有一大堆圖像，我想在用戶將圖像懸停時顯示內容。圖像懸停的內容框？

例如，如果用戶在我的圖庫中懸停在汽車圖片上，那麼低透明度內容div會在整個圖像上消失以顯示文本和鏈接。

我認爲這個效果可以用一點JS甚至CSS轉換來完成淡入淡出。

我只需要知道如何使內容框出現在懸停的圖像上，可能在80％的不透明度。

下面有什麼，我心裏有一個例子：

Screenshot

感謝您的幫助，如果任何人都可以在正確的方向點我將不勝感激。

如有需要，我可以發佈更多信息。

來源

2011-07-24 Ryan

這是實現懸停顯示和隱藏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：再次更改URL，並改變了代碼，因爲我有一些額外的代碼有..再加上我覺得我還不如加在裏面這兩個.stop()使其停止動畫如果鼠標移動或鼠標移出動畫時發生。

（如果沒有停止位置，可以多次懸停進出，然後當他停止時，動畫仍會繼續運行，直到每次動畫完成多次觸發動畫爲止。您可以在此處測試http://jsfiddle.net/va2B8/1/ ）

來源

2011-07-24 22:03:07 Joonas

下面是一個簡單的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屬性。

來源

2011-07-24 21:55:05 Purag

如果你明白我的意思，有沒有什麼辦法讓每個這些所謂的氣球與圖像大小相同？所以它看起來更像我上面張貼的圖片？ @purmou – Ryan

@Ryan：如果你滾動到頁面底部（http://file.urin.take-uma.net/jquery.balloon.js-Demo.html），你會發現一個有趣的功能，可以讓你定義所有氣球元素的類。在你的網站的CSS中，你可以定義你要應用於氣球的類的高度和寬度樣式，或者甚至動態地使用JavaScript（以便它與圖像的寬度和高度相匹配）。 – Purag

您可以開始使用此琴：

包含圖像和跨度像http://jsfiddle.net/Christophe/2RN6E/3/

1格：

<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/

來源

2011-07-24 21:56:43 ChristopheCVB

謝謝，這似乎是一個完全在CSS中完成的完美方式：D。會讓你知道我如何繼續。 – Ryan

我只是這樣做：

http://twostepmedia.co.uk

它採用hoverintent jQuery插件所以有250毫秒的延遲用戶將鼠標懸停在以後避免不穩定懸停行爲。

來源

2011-07-24 22:31:23 benhowdle89

我什麼都看不見？ @ benhowdle89 – Ryan

對不起，剛更新了鏈接 – benhowdle89

輝煌的例子！正是我想要的只是一個衰落的過渡！可能有一個鑽研來源：P – Ryan

圖像懸停的內容框？

回答

相關問題