3

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

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

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

4

3 回答 3

2

如果你将它包装在一个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/

正如@BoltClock 所提到的，从语义上讲，将它放在一个div或一个标签内可能会更好。figure

于 2011-10-14T16:22:21.080 回答
1

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

我能给您的最佳解决方案是将您的标签包裹<img>在 a<div>或类似物品中，然后将其:after放在上面，或者<img>完全放弃标签并使用 abackground-image代替。

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

于 2011-10-14T16:25:36.797 回答
0

:after & :before不适用于, ,等replaced元素imginputbutton

检查这个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/

于 2011-10-14T16:27:13.683 回答