CSS 悬停在不处理图像后？

Question

我做了一个小提琴： http://jsfiddle.net/ATdRD/

任何人都可以修复此问题或找出原因不工作？？

当用户将鼠标悬停在图像上时，我希望显示数据标题，我可以将其样式设置为工具提示

Answer 1

如果你将它包装在 p 标签中并给它一些定位，它就会起作用：

<p class="kudoIcon" data-title="Admin">
    <img src="http://www.google.co.uk/images/srpr/logo3w.png" alt="Wapple" />
</p>

CSS

.kudoIcon {
    position: relative;
}

.kudoIcon:hover:after{
    content: attr(data-title);
    position: absolute;
    top:100px;          /*ADDED*/
    left:100px;         /*ADDED*/
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.85);
    padding: 3px 7px;
    color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-left: 7px;
    margin-top: -3px;
    z-index: 1000;
}

示例： http://jsfiddle.net/ATdRD/2/

从语义上讲，最好将其放在 div 中或 figure 标签，如@BoltClock 提到过。

Answer 2

事实证明，大多数浏览器根本不支持 标记上的 :after 。 （显然 Opera 支持它，但除此之外）

我可以给您的最佳解决方案是将您的 包装在

中，或者类似，并在其上放置 :after ，或者完全放弃 标签并使用 background-image 代替。

我找到了这个网站 - http://lildude.co.uk/after- css-property-for-img-tag - 这也可能对你有帮助。

Answer 3

<代码>：&之后:before 不适用于 replaced 元素，例如 img 、 input、button

检查此 http://reference.sitepoint.com/css/replacedelements

所以，你必须定义 non -替换之前的元素像这样的 img 标签

<a href="">
    <img src="image" alt="Wapple" />
</a>

http://sixrevisions.com /css/snazzy-hover-effects-using-css/