有些时候,我们希望鼠标移到文字或者图片上的时候,显示一些说明文字,
以下为实现方法,因为我最终实现的为在图片上加文字,所以 颜色度 将别人的 .8==>.1
下移的位置也从 -34px==>-12px (在图上显示文字正好)。你也可以自己调整其它的部分。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实践题
</title>
<style type="text/css">
.tags {
position: relative;
}
.tags:hover:after {
background: rgba(0,0,0,.1);
border-radius: 10px;
bottom: -12px;
color: #fff;
content: attr(ishow);
left: 10%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 350px;
}
</style>
</head>
<body>
<a class="tags" ishow="Text shown on hovering">Exposed text
</a>
</body>
</html>
转载于:https://www.cnblogs.com/wonder223/p/9619972.html