<a data-title="提示"> 提示</a>
css样式说明:
a:hover {
position: relative;
}
a[data-title]:hover:after {
content: attr(data-title);
padding: 6px 10px;
color: #fff;
background-color: #000;
position: absolute;
left: 10%;
top: -45%;
z-index: 20;
white-space: nowrap;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
// -moz-box-shadow: 0px 0px 4px #222;
// -webkit-box-shadow: 0px 0px 4px #222;
// box-shadow: 0px 0px 4px #222;
}
这段CSS代码展示了如何在鼠标悬停在带有data-title属性的a元素上时,显示一个提示信息。提示内容为data-title的值,背景颜色为黑色,文字颜色为白色,具有圆角和阴影效果,且位置相对定位。
987

被折叠的 条评论
为什么被折叠?



