Question

任何人都可以解决这个问题或发现为什么这不起作用吗？

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

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标记上的<img>。（显然它得到Opera的支持，但其他并不多）

我可以给你的最佳解决方案是将你的<img>包裹在<div>或类似内容中，然后将:after放在其上，或放弃<img>代码完全使用background-image代替。

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

Answer 3

:after & :before不适用于replaced元素，img，input，button

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

因此，您必须在non-replace标记之前定义img元素，如此

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

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

CSS没有处理图像后悬停？

3 个答案: