一点小小的创意css鼠标放上去则显示电话号码

183 阅读 0 评论 121 点赞

我是靠谱客的博主寂寞西牛，最近开发中收集的这篇文章主要介绍一点小小的创意css鼠标放上去则显示电话号码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1， default:

2，鼠标移上去:

来源：今天在同事的手机的电话薄里面发现的，发现他存的电话号码都是显示名字，然后只要往下移动，就能显示这个人的相应的号码。然后自己就在想，这还满不错的嘛。于是就想到以前好象收藏过类似的效果。稍微改下。总结：生活中的发现无处不在，能够善于发现，然后勤于思考、联想，这样的确是个优点

。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>comasp's blog</title> 
<style type="text/css"> 
a{ 
 color: #FFFF99; 
 text-decoration: none; 
}a:hover{ 
 color: #FFFFFF; 
 text-decoration: underline; 
} 
 
#nav{ 
 padding: 10px 10px 0; 
 font-size: 12px; 
 font-weight: bold; 
 margin: 1em 0 0; 
 list-style:none; 
}.bi{ 
 position: relative; 
 z-index: 0; 
}.bi:hover{ 
 z-index: 99; 
}.bi:hover span{ 
 visibility: visible; 
 top: 0; 
 left: 0; 
 cursor: pointer; 
}.bi span{ 
 position: absolute; 
 left: -999em; 
 visibility: hidden; 
}#nav li a,.bi:hover span{ 
 line-height: 20px; 
 text-decoration: none; 
 background: #DDDDDD; 
 color: #666666; 
 display: block; 
 width: 80px; 
 text-align: center; 
}#nav li a:hover,.bi:hover span{ 
 color: #FFFFFF; 
 background: #DC4E1B; 
}.bi:hover span{ 
 padding-top: 2px; 
} 
</style> 
</head> 
<body> 
 <ul id="nav"> 
 <li>张三13011111111</li> 
 <li>李四13022222222</li> 
 <li>王五13033333333</li> 
 <li>赵六13044444444</li> 
 <li>什么七去了13055555555</li> 
 </ul> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]