我希望能夠在鼠標滑過圖片時在圖片上顯示信息(基本上是HTML)...我知道有一個.hover()
jQuery函數,但我不確定如何使用它獲得期望的效果。在滾動圖片上顯示圖片信息
在理想情況下,當用戶將鼠標懸停在圖像上,將「變灰」(50%的不透明度的例如黑色層)與像一個標題一些HTML等等等等
能有人指出了正確的方向,或提供示例代碼
感謝
我希望能夠在鼠標滑過圖片時在圖片上顯示信息(基本上是HTML)...我知道有一個.hover()
jQuery函數,但我不確定如何使用它獲得期望的效果。在滾動圖片上顯示圖片信息
在理想情況下,當用戶將鼠標懸停在圖像上,將「變灰」(50%的不透明度的例如黑色層)與像一個標題一些HTML等等等等
能有人指出了正確的方向,或提供示例代碼
感謝
你可以沿着這些線路做一些事情:
包裝你的形象和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;
}
,最後使用.hover()
像這樣的jQuery:
$(".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();
});
You can try the above code out here
這使圖像變淡,並在懸停時顯示上面的<div>
,包裝使<div>
完全位於<img>
的正上方,如果您需要大量包裝內容,請將.hover
div的尺寸與形象......只是取決於你要去的確切外觀。
如果您無論如何使用jQuery,你可能需要一個工具提示插件: http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
尼斯回答尼克!而jsfiddle真棒! – 2010-05-03 22:05:47
我還沒有嘗試過實施這個,但首先看起來它看起來非常棒! – Chris 2010-05-03 22:35:57
如何讓圖像在頂部有50%(或其他)的黑色遮罩,而不是淡出? – Chris 2010-05-03 22:40:32