注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

c32's blog

每天学习一点点,每天进步一点点.

 
 
 
 
 

日志

 
 

css特效-鼠标滑动显示二维码  

2016-07-25 11:49:51|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
源码
<link href="http://www.gzxinsiyi.com/list.css?v=20140522" rel="stylesheet" type="text/css" />

<div class="weixin">
<img src="http://www.careland.com.cn/images/u30.png" width="22" />
<div class="wei_tan">
<div class="wei_left"><img src="http://www.careland.com.cn/images/weixing.png" width="126"><span>凯立德微信二维码</span></div>
<div class="wei_right"><img src="http://www.careland.com.cn/images/zhifubao.png" width="126"><span>支付宝服务二维码</span></div>
</div>

css
*{
margin:0;
padding:0;
}

.weixin{position:relative; width: 22px; padding-left:8px; float: right;}
.weixin:hover .wei_tan{display:block;}
.weixin img{ margin-bottom: -8px;}
.wei_tan{display:none;position:absolute; right:0;top:22px; width:288px;padding:20px; background-color:#fff; border:1px solid #dedede;}
.wei_tan img{margin-bottom:10px;}
.wei_tan div, .wei_about div{ width:140px;text-align:center;}
.wei_tan span, .wei_about span{width:140px; float:left;line-height: 40px;}
.wei_left{float:left;}
.wei_right{float:right;}
  评论这张
 
阅读(6)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017