CSS实现鼠标悬停弹出微信二维码

WordPress网站建设过程中,需要在网站上展示微信二维码,用于展示自己的公众号或者网站联系人信息;如何实现鼠标悬停弹出二维码功能呢,请看下面的方法,效果可以看本站页脚的微信二维码效果。

CSS实现鼠标悬停弹出微信二维码

特点

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;
	-webkit-transform-origin: top right;
	transform-origin: top right;
	-webkit-transform: scale(0);
	transform: scale(0);
	opacity: 0;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

首先父元素添加相对定位,然后以”:after” 伪元素在元素的内容之后插入微信二维码;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;
}

transform-origin: 定义二维码图片弹出原点位置,其用法参考CSS3 transform-origin 属性
无论使用哪一种方式都能够实现鼠标悬停弹出二维码功能,但是个人推荐使用第二种方法,因为这种方法很容易修改二维码路径。

大功告成,接下来看看效果吧,可以通过修改css样式适当调整二维码的位置,大小等。具体效果可以看本站页脚。

发表评论

游客欢迎您123

“CSS实现鼠标悬停弹出微信二维码” 有 48条评论

    • 嗯,就是,本站的分享按钮就是使用这个方法实现的。

  1. -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    博主你好,看到目前网站关于微信二维码hover显示加了这一段代码。请问怎么与文中的代码结合呢?本人是CSS菜鸟。

    • a标签的class属性和css选择器的名称一致就可以了,这里是:”.weixin”。再有不明白的加qq:825641026

    • 可能是哪里的设置不对,你的网站也不能访问,我也不知道呀,哪里有问题还不好说呢

      • 我和您的公众号,说话了,这里不能截图,要不您能加下我微信么(4191013),我截图给您!万分感谢。很需要这个功能啊!!!!

  2. //此处为微信图标 这里应该怎么设置,我用的是子主题,如何黏贴CSS,谢谢

    • 子主题的话,css可以直接写在子主题的style.css里面就可以的。不是很复杂

  3. 您好,我是用wordpress的DIVI主题建站,我对代码一窍不通,我按照您的第二种方法,把第二段代码加到子主题的style.css中了,第一段代码放到页面中的代码模块中,请问哪里放微信标志,哪里放二维码图片啊?

      • 我还是每明白,原谅我太白,

        在第一段代码中:
        //此处为微信图标。

        如果微信标志图片是http://我的路径/qrcode.gif
        二维码的图片是http://我的路径/erweima.jpg
        代码应该是怎么的呢?
        谢谢!

        • <img class="qrcode" src="http://你的路径/qrcode.gif" alt="微信二维码"/>
          <img class="weixin" src="http://你的路径/weixin.gif" alt="微信图标"/>

          就是这种格式,二维码图片放在上边。微信图标放在下面就可以了。如果微信图标位置不对的话,需要修改你的css

  4. 方法二,如果去掉“//此处为微信图标。”就不显示了,这是怎么回事?

    • 没明白什么意思,你说的是什么不显示,是二维码,还是什么?

  5. 受教了受教了,谢谢大佬指点!

  6. 请问css代码是放在哪个文件的style.css里边?我看主题里边有好几个style.css

  7. 你这上个月发布的文章
    评论都是几年的了

    • 没遇到过,我现在的分享里面的微信二维码用的就是这个方法,没有不兼容的问题,你说的不兼容具体指什么?

      • 我用的也是四个栏目,本来鼠标移入,二维码都会出现在当前那个的上方,但是我现在在谷歌访问的时候,几个出现的位置在同一个地方了,原来在谷歌上是好用的,现在我试了一下在safari浏览器上才好用,找不出是哪里的问题

        • 如果你说的是你的网站上的这个的话应该是图标有问题,图标的<code>display:float</code>不行