在滾動圖片上顯示圖片信息

Question

我希望能夠在鼠標滑過圖片時在圖片上顯示信息（基本上是HTML）...我知道有一個.hover() jQuery函數，但我不確定如何使用它獲得期望的效果。

在理想情況下，當用戶將鼠標懸停在圖像上，將「變灰」（50％的不透明度的例如黑色層）與像一個標題一些HTML等等等等

能有人指出了正確的方向，或提供示例代碼

感謝

Answer 1

你可以沿着這些線路做一些事情：

包裝你的形象和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的尺寸與形象......只是取決於你要去的確切外觀。

Answer 2

如果您無論如何使用jQuery，你可能需要一個工具提示插件： http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/