在文字或者图片下显示提示文字

有些时候，我们希望鼠标移到文字或者图片上的时候，显示一些说明文字，

以下为实现方法，因为我最终实现的为在图片上加文字，所以颜色度将别人的 .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>