不处理图像后CSS悬停？答案

【问题标题】：CSS hover after not working on images?不处理图像后CSS悬停？
【发布时间】：2011-10-14 16:16:02
【问题描述】：

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

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

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

【问题讨论】：

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

标签： css hover pseudo-element

【解决方案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 提到的那样。

【讨论】：

【解决方案2】：

事实证明，大多数浏览器根本不支持 <img> 标签上的 :after。（显然它是由 Opera 支持的，但其他的不多）

我能给您的最佳解决方案是将您的<img> 包装在<div> 或类似名称中，然后将:after 放在上面，或者完全放弃<img> 标签并改用background-image .

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

【讨论】：

【解决方案3】：

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

检查这个http://reference.sitepoint.com/css/replacedelements

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

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

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

【讨论】：