jquery - 如何通过css在鼠标悬停时显示图像

Question

我的图片很少，它们是动态从数据库中获取的。

当用户将鼠标悬停在图片上时，名称应显示在图片下方。

我如何使用 CSS 或 jquery 来做到这一点？

检查下图，这是应该的。

我的代码是

<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;
}

Answer 1

更新演示: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;
}