滑鼠移入移出，樣式修改，顯示隱藏提示訊息
阿新 • • 發佈：2019-01-24
重要的有三點：
1.a標籤中的ishow是自己定義的屬性，自己輸入值
2.a:hover表示滑鼠移上去時，
3.a:hover:after{content:attr(ishow)}表示滑鼠移上去後，顯示提示訊息
<!DOCTYPE html>
<html><head lang="en">
<meta charset="UTF-8">
<title>實踐題 </title>
<style type="text/css">
.tags {
position: relative;
}
.tags:hover{
background:blue;
}
.tags:hover:after {background: rgba(0,0,0,.8);
border-radius: 10px;
bottom: -34px;
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>