CSS实现鼠标悬停弹出微信二维码 2018年4月9日HTML/CSS895 WordPress网站建设过程中,需要在网站上展示微信二维码,用于展示自己的公众号或者网站联系人信息;如何实现鼠标悬停弹出二维码功能呢,请看下面的方法,效果可以看本站页脚的微信二维码效果。 特点 1、纯CSS实现二维码展示功能,减少加载JS; 2、使用CSS3 transform 属性; 第一步 在需要展示二维码的地方添加如下代码,其中<a>标签内容可以根据需要修改成图片等,href=”javascript:”表示<a>标签作为按钮使用,不做跳转,实现url访问拦截。 <a class="weixin" href="javascript:"> wechat </a> 第二步 在样式表style.css中添加如下代码 /*微信二维码*/ a.weixin{ position:relative; } .weixin::after{ content: url(images/qrcode.gif); position: absolute; right: -28px; top: -135px; z-index: 99; width:120px; height: 120px; border: 5px solid #0095ba; border-radius: 4px; transform-origin: top right; transform: scale(0); opacity: 0; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } 首先父元素添加相对定位,然后以”:after” 伪元素在<a></a>元素的内容之后插入微信二维码;transform: scale(0)和opacity: 0实现二维码隐藏。 第三步 同样在style.css中添加如下代码 .weixin:hover::after{ transform:scale(1); opacity: 1; } 当鼠标经过时显示二维码。 另一种方法(推荐) 上面的代码中使用了”:after”伪类元素,是在css中引入二维码文件,其实我们也可以利用img标签将二维码图片放在html中,结构如下: <a class="social weixin" href="javascript:"> <img class="qrcode" src="http://你的路径/qrcode.gif" alt="微信二维码"> //此处为微信图标。 </a> 自然css样式也要做相应的改变,如下: a.weixin { position: relative; } .weixin img.qrcode { position: absolute; z-index: 99; top: -135px; right: -28px; width: 7.5rem; max-width: none; height: 7.5rem; transform: scale(0); transform-origin: top right; opacity: 0; border: .3125rem solid #0085ba; border-radius: .25rem; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .weixin:hover img.qrcode { transform: scale(1); opacity: 1; } 无论使用哪一种方式都能够实现鼠标悬停弹出二维码功能,但是个人推荐使用第二种方法,因为这种方法很容易修改二维码路径。 大功告成,接下来看看效果吧,可以通过修改css样式适当调整二维码的位置,大小等。具体效果可以看本站页脚。点击前往 发表评论 取消回复 电子邮件地址不会被公开。Username Username Username 闲鱼 2年前 回复 有学习到,很棒 Lerm 2年前 回复 谢谢,多多交流。 李 2年前 回复 不错 Lerm 2年前 回复 谢谢,常来哦 智慧宫 1年前 回复 这方法不错,可以用在好多地方 Oconner 1年前 回复 嗯,就是,本站的分享按钮就是使用这个方法实现的。 轩陌 1年前 回复 给你来个bug吧,微信二维码的div盒子高度不够,嘿嘿 Oconner 1年前 回复 这个到时没写出来,应该给div设置overflow: visible就可以 轩陌 1年前 回复 你可以不用设置高度 素材火 1年前 回复 没有直接下载啊 Oconner 1年前 回复 复制即可 Ning 12月前 回复 -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; 博主你好,看到目前网站关于微信二维码hover显示加了这一段代码。请问怎么与文中的代码结合呢?本人是CSS菜鸟。 Oconner 12月前 回复 a标签的class属性和css选择器的名称一致就可以了,这里是:”.weixin”。再有不明白的加qq:825641026 sand 11月前 回复 您好,我设置了,但都显示网址 。怎么回事啊 Oconner 11月前 回复 可能是哪里的设置不对,你的网站也不能访问,我也不知道呀,哪里有问题还不好说呢 sand 11月前 回复 我和您的公众号,说话了,这里不能截图,要不您能加下我微信么(4191013),我截图给您!万分感谢。很需要这个功能啊!!!! mrjucn 8月前 回复 学习了,好东西~ skyoy 7月前 回复 手机上生效,pc端打开不生效。 Oconner 7月前 回复 可能是设置问题,我这边没有问题的 吖吖 3月前 回复 真的是太棒 Oconner 3月前 回复 谢谢,大家的支持是我前进的动力 潮品 3月前 回复 正在找,真的不错呀 Oconner 3月前 回复 有用就好了。 vip 3月前 回复 //此处为微信图标 这里应该怎么设置,我用的是子主题,如何黏贴CSS,谢谢 Oconner 3月前 回复 子主题的话,css可以直接写在子主题的style.css里面就可以的。不是很复杂 years 2月前 回复 您好,我是用wordpress的DIVI主题建站,我对代码一窍不通,我按照您的第二种方法,把第二段代码加到子主题的style.css中了,第一段代码放到页面中的代码模块中,请问哪里放微信标志,哪里放二维码图片啊? Oconner 2月前 回复 微信图标和二维码相邻放置就可以 years 2月前 回复 我还是每明白,原谅我太白, 在第一段代码中: //此处为微信图标。 如果微信标志图片是http://我的路径/qrcode.gif 二维码的图片是http://我的路径/erweima.jpg 代码应该是怎么的呢? 谢谢! Oconner 2月前 回复 <img class="qrcode" src="http://你的路径/qrcode.gif" alt="微信二维码"/> <img class="weixin" src="http://你的路径/weixin.gif" alt="微信图标"/> 就是这种格式,二维码图片放在上边。微信图标放在下面就可以了。如果微信图标位置不对的话,需要修改你的css 鹇鱼 2周前 回复 方法二,如果去掉“//此处为微信图标。”就不显示了,这是怎么回事? 智慧宫 1周前 回复 没明白什么意思,你说的是什么不显示,是二维码,还是什么?
Ning 12月前 回复 -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; 博主你好,看到目前网站关于微信二维码hover显示加了这一段代码。请问怎么与文中的代码结合呢?本人是CSS菜鸟。
years 2月前 回复 您好,我是用wordpress的DIVI主题建站,我对代码一窍不通,我按照您的第二种方法,把第二段代码加到子主题的style.css中了,第一段代码放到页面中的代码模块中,请问哪里放微信标志,哪里放二维码图片啊?
years 2月前 回复 我还是每明白,原谅我太白, 在第一段代码中: //此处为微信图标。 如果微信标志图片是http://我的路径/qrcode.gif 二维码的图片是http://我的路径/erweima.jpg 代码应该是怎么的呢? 谢谢!
Oconner 2月前 回复 <img class="qrcode" src="http://你的路径/qrcode.gif" alt="微信二维码"/> <img class="weixin" src="http://你的路径/weixin.gif" alt="微信图标"/> 就是这种格式,二维码图片放在上边。微信图标放在下面就可以了。如果微信图标位置不对的话,需要修改你的css