首页 > web前端 > css教程 > 正文

一点小小的创意css鼠标放上去则显示电话号码_经验交流

PHP中文网
发布: 2016-05-16 12:07:08
原创
1654人浏览过

1, default:

一点小小的创意css鼠标放上去则显示电话号码_经验交流
2,鼠标移上去:
一点小小的创意css鼠标放上去则显示电话号码_经验交流
来源: 今天在同事的手机的电话薄里面发现的,发现他存的电话号码都是显示名字,然后只要往下移动,就能显示这个人的相应的号码。       然后自己就在想,这还满不错的嘛。于是就想到以前好象收藏过类似的效果。 稍微改下。      总结:生活中的发现无处不在,能够善于发现,然后勤于思考、联想,这样的确是个优点
。<!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">  
<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 href="index.html">张三<span>13011111111</span></a></li>  
      <li><a href="about.html">李四<span>13022222222</span></a></li>  
      <li><a href="products.html">王五<span>13033333333</span></a></li>  
      <li><a href="services.html">赵六<span>13044444444</span></a></li>  
      <li><a href="contact.html">什么七去了<span>13055555555</span></a></li>  
    </ul>  
</body>  
</html>
登录后复制
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号