CSS鼠标放在链接上出现弹出框 |
您所在的位置：网站首页 › 前端鼠标悬停显示信息框 › CSS鼠标放在链接上出现弹出框 |
|
鼠标滑过链接的时候弹出一个信息框效果比较常用，使用JavaScript可以实现，使用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} 蚂蚁部落一信息提示框 蚂蚁部落二信息提示框 蚂蚁部落三信息提示框 蚂蚁部落四信息提示框 蚂蚁部落五信息提示框当鼠标滑过链接的时候弹出信息提示框，原理很简单，利用链接伪类a:hover和绝对定位实现的。 默认状态下span元素是隐藏的，当鼠标放在链接上的时候，span元素显示，并且span元素采用绝对定位，链接a元素采用相对定位，那么span元素的定位参考对象就是a元素。
原文发布时间为：2018-2-3 本文作者：admin 本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落 原文链接：CSS鼠标放在链接上出现弹出框 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |