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

1， default:

2，鼠标移上去:

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

。

comasp's blog

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;
}

  • 张三13011111111
  • 李四13022222222
  • 王五13033333333
  • 赵六13044444444
  • 什么七去了13055555555

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

赞 (0)

相关推荐

  • js验证电话号码手机号码的正则表达式

    下面提供的几款关于js 验证电话号码手机号码正则表达式,是我从网上收藏了,不过都是精品,专业针对手机号与电话号码进行验证的. 复制代码 代码如下: function checkPhone(phone) { //验证电话号码手机号码,包含153,159号段 if (phone==""){ alert("电话号码不能为空!"); return false; } if (phone != ""){ var p1 = /^(([0+]d{2,3}-)?(

  • java验证电话号码的方法

    项目需要用到验证用户手机号码输入是否合法,在网上找了好几处代码,经过测试都是不通过的!最后发现了一段代码可以验证通过.代码好像在一个很多广告的网站上找到的,不知道作者!不过还是谢谢原创作者的分享!下面是验证源码: 复制代码 代码如下: public static boolean isMobileNO(String mobiles) {      boolean flag = false;      try {          //13********* ,15********,18******

  • Android获取本机电话号码的简单方法

    如何在Android上获取本机电话号码,目前Android上提供了一个API可以读取早期SIM卡上固化的号码, 复制代码 代码如下: private String getPhoneNumber(){       TelephonyManager mTelephonyMgr;       mTelephonyMgr = (TelephonyManager)  getSystemService(Context.TELEPHONY_SERVICE);        return mTelephonyM

  • js验证输入是否为手机号码或电话号码示例

    代码如下: 复制代码 代码如下: <script type="text/javascript"> String.prototype.Trim = function() { var m = this.match(/^\s*(\S+(\s+\S+)*)\s*$/); return (m == null) ? "" : m[1]; } String.prototype.isMobile = function() { return (/^(?:13\d|15[8

  • php将数据库中的电话号码读取出来并生成图片

    以下是代码: 复制代码 代码如下: <?php //前面不要有空行 $id=$_GET[id]; include("admin/config.php"); $sql="select * from user where id=$id"; $data=mysql_fetch_array(mysql_query($sql)); $p=SBC_DBC($data[Phone],1); function get_str($str,$strlen=16) { $str=s

  • jquery validation验证身份证号,护照,电话号码,email(实例代码)

    validata.htm 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http

  • js验证电话号码与手机支持+86的正则表达式

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>正则表达式验证&l

  • js代码验证手机号码和电话号码是否合法

    这篇文章主要介绍了js代码验证手机号码和电话号码是否合法,手机号码和电话号码在某些网站都是必填项,为了提高用户体验度,一般要进行合法性校验的,具体代码如下:function Checkreg(){ ..... function Checkreg(){ //验证电话号码手机号码,包含 , 号段 if(document.form.phone.value==""&&document.form.UserMobile.value==""){ alert(&qu

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

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

    1, default: 2,鼠标移上去:来源: 今天在同事的手机的电话薄里面发现的,发现他存的电话号码都是显示名字,然后只要往下移动,就能显示这个人的相应的号码.       然后自己就在想,这还满不错的嘛.于是就想到以前好象收藏过类似的效果. 稍微改下.      总结:生活中的发现无处不在,能够善于发现,然后勤于思考.联想,这样的确是个优点 . comasp's blog a{ color: #FFFF99; text-decoration: none; }a:hover{ color: #

  • jquery鼠标放上去显示悬浮层即弹出定位的div层

    复制代码 代码如下: <script language="javascript" src="jquery-1.4.2.min.js"></script> <script> function show(obj,id) { var objDiv = $("#"+id+""); $(objDiv).css("display","block"); $(objD

  • jquery 文本上下无缝滚动,鼠标放上去就停止 小例子

    复制代码 代码如下: <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript">               function AutoScroll(obj) {            $(obj).find("ul:first").anima

  • javascript实现鼠标放上后下边对应内容变换的效果

    javascript实现鼠标放上后下边对应内容变换的效果

    本文实例讲述了javascript实现鼠标放上后下边对应内容变换的效果.分享给大家供大家参考.具体如下: 这是个网上比较常见的菜单效果,鼠标放上后相应的内容会切换,图文布局方式.技术方面,是JS和CSS相配合来实现,代码中的JS部分,你可以单独摘取出来保存成一个JS文件,然后引入到页面中,这样使主页面代码简洁些.本效果在ie.火狐等浏览器下测试正常. 运行效果如下图所示: 具体代码如下: <html> <head> <title>鼠标放上后下面的内容切换</tit

  • CSS鼠标响应事件经过、移动、点击示例介绍

    几种鼠标触发CSS事件. 说明: onMouseDown 按下鼠标时触发 onMouseOver 鼠标经过时触发 onMouseUp 按下鼠标松开鼠标时触发 onMouseOut 鼠标移出时触发 onMouseMove 鼠标移动时触 复制代码 代码如下: <html> <head> <title>CSS 鼠标响应事件</title> <meta http-equiv="Content-Type" content="text

  • Jquery鼠标放上去显示全名的实现方法

    第一种方式 使用mouseover.mouseout事件 // 鼠标滑过显示全名 var origin_name; $('.task_name').mouseover(function() { origin_name = $(this).text(); $(this).text($(this).nextAll("input").val()); }).mouseout(function() { $(this).text(origin_name); }); 第二种方式 使用a标签的titl

  • CSS鼠标悬停菜单 图片交换技术实现

    实际上,这里的图片在正常使用时完全可以用CSS代码来定义. 使用图片交换技术制作CSS鼠标悬停菜单 div#spritemenu { height: 50px; width: 400px; font-size: 9px; background-image: url(http://files.jb51.net/demoimg/200911/spritemenu.gif); overflow: hidden; } div#spritemenu ul li { display: inline; mar

  • JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)

    JS实现延迟隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>延迟隐藏</title> <style> #div1{ width:100px; height:100px; background:yellow; border: 5px solid #999; border-radius: 1

  • 使用JS实现鼠标放上图片进行放大离开实现缩小功能

    使用JS实现鼠标放上图片进行放大离开实现缩小功能,具体代码如下所示: <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id= 'div_jpg' style="width: 200px;height: 200px;"> <img src="./128206.jpg" id="

  • JQuery鼠标移到小图显示大图效果的方法

    本文实例讲述了JQuery鼠标移到小图显示大图效果的方法.分享给大家供大家参考.具体分析如下: 这里的显示大图功能类似上一篇<JQuery实现超链接鼠标提示效果的方法>,稍微修改一下代码,就可以做出一个图片的提示效果. 参考前面的超链接提示效果的代码,只需要将创建的div元素的代码改为: //创建 div 元素 图片提示 var tooltip = "<div id="tooltip"><img src=""+ this.hr

随机推荐