我正在阅读CSS技巧,最后可以看到以下内容。
使用HTML5数据属性,然后将该属性放入并设置为伪元素样式,我们可以通过CSS创建完全自定义的工具提示。
问题是文章内的链接已失效,并且我不是一个能理解如何执行此操作的好人。有人可以帮忙吗?
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover {
color: #c00;
text-decoration: none;
}
.tooltip:hover:after {
background: #111;
background: rgba(0, 0, 0, .8);
border-radius: .5em;
bottom: 1.35em;
color: #fff;
content: attr(title);
display: block;
left: 1em;
padding: .3em 1em;
position: absolute;
text-shadow: 0 1px 0 #000;
white-space: nowrap;
z-index: 98;
}
.tooltip:hover:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0, 0, 0, .8) transparent;
border-width: .4em .4em 0 .4em;
bottom: 1em;
content: "";
display: block;
left: 2em;
position: absolute;
z-index: 99;
}
<p>Vestibulum mollis mauris <a href="#" class="tooltip" title="Sample tooltip">pellentesque</a></p>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句