律师网站设计:纯CSS实现鼠标悬停弹出微信二维码

  • 2022-04-27
  • 9835

律师网站建设过程中,我们经常要在项目中展示微信二维码,下面我们用纯CSS 实现鼠标悬停弹出微信二维码,在真实项目中也许对大家非常有用,动态页面中,原则上能少用js就少用js。

HTML代码如下:

<div class="w">
<div class="x"><span class="fa fa-weixin">
<div class="s"><img src="/2016/04/wx.png"></div></i></span>
</div>

 

CSS代码如下:

/***微信鼠标悬停效果***/
.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解决问题。

相关阅读

律师网站设计:纯CSS实现鼠标经过弹出微信二维码

律师网站建设中用CSS3实现时间轴动画

律师网站设计中用CSS实现宽度自适应16:9的矩形

CSS3变形透视动画-3-cyy

CSS3FLEX弹性盒模型让布局飞起来-2-cyy

成都律品科技有限公司专注律师互联网营销技术服务,创始人员2009年开始从事律师行业互联网技术开发、营销运营工作已十年,2018年公司正式成立,不断探索律师行业服务需求,致力于为律师行业提供透明、优质的服务,现已为全国多家律师事务所、律师团队提供互联网技术及营销支持。

在线咨询
  • 152-0832-9147

  • 105991110

全时在线,如未回复请留下联系方式

微信咨询