当前位置：移动技术网 > IT编程>网页制作>CSS > 一点小小的创意css鼠标放上去则显示电话号码

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

2017年12月08日 | 移动技术网IT编程 | 我要评论

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="">张三<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 全选注:]

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

css3实现边框圆角内凹效果

我们知道在边框的四个角实现圆角可以用 border-radius 实现, 如果在边框中心实现边框的内凹效果呢?效... [阅读全文]
【css】利用line-height实现垂直居中

替换元素与非替换元素<body> <div>hello</div> &l... [阅读全文]
通过鼠标使图片交替显示

伪类 after、before、hovercss代码使用的是预编译less，简单分享：就是固定框200*200，... [阅读全文]
荐微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示

一、前言项目中遇到的评分相关的需求其实还挺多。之前也写过网页中关于评分功能实现的文档。这次，是基于微信小程序开发... [阅读全文]
【剑指 Offer 31】栈的压入、弹出序列

题目题目链接输入两个整数序列，第一个序列表示栈的压入顺序，请判断第二个序列是否为该栈的弹出顺序。假设压入栈的所有... [阅读全文]
前端学习笔记（3）之css文本属性合集

文本模块缩进text-intent间距 xxx-spacing控制文本大小写 text-transform文本... [阅读全文]
CSS 控制动画播放与暂停的小技巧(非常实用)

今天要介绍一种很简单的使用 css 控制动画播放与暂停的小技巧。使用好了，可以在很多实际场景得以运用。我们先来看个例子，本例子是我在闲逛 codepen 时看... [阅读全文]
css3 flex布局实现平均分配元素的示例代码

本文主要介绍了css3 flex布局实现平均分配元素，给自己留个笔记，也分享给大家，具体如下：例子一：<!doctype html><html... [阅读全文]
CSS字体、文本、列表属性详细介绍

1.字体属性　　color，规定文本的颜色，如 div{color:red;}　　font-style，规定文本显示方式，如 p.normal {font-st... [阅读全文]
深入理解CSS background-blend-mode的作用机制

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、可能都知道的首先，讲两点大家可能都知道的知识点：1.background-... [阅读全文]

网友评论


验证码：

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

2017年12月08日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论