一点小小的创意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><a class="bi" href="index.html">张三<span>13011111111</span></a></li>    <li><a class="bi" href="about.html">李四<span>13022222222</span></a></li>    <li><a class="bi" href="products.html">王五<span>13033333333</span></a></li>    <li><a class="bi" href="services.html">赵六<span>13044444444</span></a></li>    <li><a class="bi" href="contact.html">什么七去了<span>13055555555</span></a></li>    </ul>  </body>  </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

[Html/CSS] 一点小小的创意css鼠标放上去则显示电话号码

相关帖子

常用的css伪类a标签

Q+CSS+DIV多彩随机变化链接样式tag标签样式

Discuz!X3.5支付宝充值积分支付后显示未成功解决方法

7种好看的鼠标点击效果

好看的CSS剪裁GIF背景图片动画特效

解决编辑器图片插入多次但发布后只显示一次问题

利用HTML、CSS和JS制作随机密码生成器

css如何调整字体颜色

javascript如何改变背景

react如何引入css

江南才子 LV4