在律师网站建设过程中，我们经常要在项目中展示微信二维码，下面我们用纯CSS 实现鼠标悬停弹出微信二维码，在真实项目中也许对大家非常有用，动态页面中，原则上能少用js就少用js。
<div class="w">
<div class="x"><span class="fa fa-weixin">
<div class="s"><img src="/2016/04/wx.png"></div></i></span>
</div>
/***微信鼠标悬停效果***/
.w {
padding:0
}
.w .x {
margin:30px 0 10px
}
.w .x .fa {
position:relative;
margin:0 5px;
font-size:30px
}
.w .x .fa .s {
position:absolute;
display:none;
margin-left:-50px;
left:50%;
bottom:130%;
width:100px;
height:100px;
background-color:#fff;
box-shadow:0 2px 4px rgba(0,0,0,.5)
}
.w .x .fa .s img {
width:100%
}
.w .x .fa:hover .s {
display:block
}
#bottom-bar .wf-td p fa fa-weixin{
display: none;
}
如上我们就不用js去实现悬停效果了，css解决问题。
刑事律师网站模板、响应式深灰色大气律师网站模板
￥1000.00
律师网站模板、律师事务所网站模板【响应式，蓝色简洁大气风格】
￥1000.00
简洁大气的响应式律师事务所网站设计模板，兼容移动端
￥50.00
成都律品科技有限公司专注律师互联网营销技术服务，创始人员2009年开始从事律师行业互联网技术开发、营销运营工作已十年，2018年公司正式成立，不断探索律师行业服务需求，致力于为律师行业提供透明、优质的服务,现已为全国多家律师事务所、律师团队提供互联网技术及营销支持。
152-0832-9147
105991110
微信咨询