码迷,mamicode.com
首页 > 其他好文 > 详细

鼠标悬浮在超链接上弹出提示框

时间:2015-09-12 17:38:11      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:

鼠标悬浮在超链接上弹出提示框:
大家知道超链接有一个title属性,当鼠标放在链接的时候,可以出现一个提示框效果,不过自带的效果虽然廉价但往往并不物美,所以需要自定义一个,下面是一个纯CSS实现的这样的效果,和大家分享一下。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>鼠标悬浮在超链接上弹出提示框-蚂蚁部落</title>
<style type="text/css">
body{
  font-size:12px;
}
.tip{
  color:red;
  text-decoration:none;
  position:relative;
}
.tip span{
  display:none;
}
.tip:hover{
  cursor:hand;
}
.tip:hover .popbox{
  display:block;
  position:absolute;
  top:15px;
  left:-30px;
  width:100px;
  background-color:#424242;
  color:#fff;
  padding:10px;
}
</style>
</head>
<body>
蚂蚁部落欢迎您,点击<a href="#" class="tip">链接<span class="popbox">蚂蚁部落提供基础的实例教程</span></a>
</body>
</html>

实现原理非常的简单,这里主要是使用了绝对定位,只要高明吧了这个原理,那么就没有什么难度了。
CSS绝对定位可以参阅CSS的绝对定位一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9270

鼠标悬浮在超链接上弹出提示框

标签:

原文地址:http://www.cnblogs.com/nulifendou/p/4803133.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!