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

ttx9n · 发表于 2007-10-16 13:55:31

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="https://www.jb51.net/article/index.html">张三13011111111</a></li>  
      <li><a class="bi" href="https://www.jb51.net/article/about.html">李四13022222222</a></li>  
      <li><a class="bi" href="https://www.jb51.net/article/products.html">王五13033333333</a></li>  
      <li><a class="bi" href="https://www.jb51.net/article/services.html">赵六13044444444</a></li>  
      <li><a class="bi" href="https://www.jb51.net/article/contact.html">什么七去了13055555555</a></li>  
    </ul>  
</body>  
</html>

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

wangdj110 · 发表于 2022-8-8 10:33:26

谢谢小Y分享

lsc54 · 发表于 2022-8-11 21:40:01

老大你好你好好你好

jasonlong · 发表于 2022-10-24 14:01:41

我要金豆金豆金豆

z835648964 · 发表于 2022-12-18 17:45:38

额风风风微风微风违法

r8st9 · 发表于 2023-9-2 19:07:52

vcxvcxv

lsc54 · 发表于 2023-11-2 14:30:49

。。。。。。。。。。。。。。。

r8st9 · 发表于 2023-11-7 06:17:21

激动人心，无法言表！

123456 · 发表于 2023-11-13 04:39:20

66666666666666666666

5vulod · 发表于 2023-11-26 11:38:02

老大你好你好好你好

账号		自动登录	找回密码
密码			立即注册

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

相关帖子