CSS鼠标放在链接上出现弹出框

2018-2-3 15:25| 作者: admin| 查看: 1560| 评论: 0|来自: 蚂蚁部落

鼠标滑过链接的时候弹出一个信息框效果比较常用,使用JavaScript可以实现,使用CSS也可以实现,下面通过代码实例对此做一下简单介绍,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!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元素。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部