本文主要是介绍鼠标移入移出,样式修改,显示隐藏提示消息,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
重要的有三点:
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>
这篇关于鼠标移入移出,样式修改,显示隐藏提示消息的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!