CSS鼠标放在链接上出现弹出框
鼠标滑过链接的时候弹出一个信息框效果比较常用，使用JavaScript可以实现，使用CSS也可以实现，下面通过代码实例对此做一下简单介绍，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{height:30px;}
div a{
display:block;
width:100px;
height:30px;
text-align:center;
line-height:30px;
margin-left:5px;
float:left;
text-decoration:none;
background-color:#CCC;
position:relative;
}
div a span{
width:120px;
height:60px;
display:none;
background-color:#CC3;
position:absolute;
left:80px;
top:30px;
z-index:10
}
div a:hover span{display:block}
</style>
</head>
<body>
<div>
<a href="#">蚂蚁部落一<span>信息提示框</span></a>
<a href="#">蚂蚁部落二<span>信息提示框</span></a>
<a href="#">蚂蚁部落三<span>信息提示框</span></a>
<a href="#">蚂蚁部落四<span>信息提示框</span></a>
<a href="#">蚂蚁部落五<span>信息提示框</span></a>
</div>
</body>
</html>当鼠标滑过链接的时候弹出信息提示框，原理很简单，利用链接伪类a:hover和绝对定位实现的。
默认状态下span元素是隐藏的，当鼠标放在链接上的时候，span元素显示，并且span元素采用绝对定位，链接a元素采用相对定位，那么span元素的定位参考对象就是a元素。
原文发布时间为：2018-2-3
本文作者：admin
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
原文链接：CSS鼠标放在链接上出现弹出框
