如何通過css在鼠標上顯示圖像

我有幾張圖片，它們是從數據庫動態獲取的。如何通過css在鼠標上顯示圖像

當用戶將鼠標懸停在圖像上時，名稱應顯示在圖像下方。

我該如何用CSS或jQuery來做到這一點？

檢查下面的圖像，這是它應該如何。

enter image description here

我的代碼是

<div class="blue_strip_icon" style="padding-right: 15px;"> 
    <a href="<%= pag.page.id %>" class="icon_link"> 
    <img src="<%= @icon %>" title="<%= pag.page.page_title %>" /> 
    </a> 
</div>

CSS是

.blue_strip_icon{ 
    float: right; 
    height: 50px; 
    padding-top: 10px; 
}

來源

2012-10-16 manish nautiyal

更新演示：http://jsfiddle.net/n66Tf/1/

您可以使用CSS :after僞元素創建自定義的工具提示元素。

入住此演示：http://jsfiddle.net/n66Tf/

HTML：

<!-- render the tooltip text from the server itself --> 
<a href="http://google.com" tooltip="Hello World">Hello</a>

CSS：

a { 
    position: relative; 
    overflow: visible; 
} 
a:hover:after { 
    content: attr(tooltip); /* use the tooltip attribute instead of hardcoding */ 
    color: blue; 
    top: 22px; 
    position: absolute; 
    white-space: nowrap; 
}

來源

2012-10-16 10:09:28 techfoobar

你是對的，但我的內容將來自數據庫。我無法在css文件中對它進行硬編碼:( –

這可以通過使用鏈接屬性作爲用於僞工具提示的文本來輕鬆完成。請在答案中查看更新的演示。 – techfoobar

請分享鏈接 –