如何用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 psuedo元素来创建自定义的工具提示元素。

选中演示 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;
}

Answer 2

我会使用像jQuery tooltip这样的插件，然后将工具提示显示为图像

Answer 3

您可以像这样使用同级~选择器：http://jsfiddle.net/Zp2Bv/

Answer 4

本教程可以帮助您：http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/