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

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;
}

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

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

发表评论

    1. Lerm 回复

      谢谢,多多交流。

    1. Lerm 回复

      谢谢,常来哦

    1. Oconner 回复

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

  1. 轩陌 回复

    给你来个bug吧,微信二维码的div盒子高度不够,嘿嘿

    1. Oconner 回复

      这个到时没写出来,应该给div设置overflow: visible就可以

    1. Oconner 回复

      复制即可

  2. Ning 回复

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

    1. Oconner 回复

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

  3. sand 回复

    您好,我设置了,但都显示网址 。怎么回事啊

    1. Oconner 回复

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

      1. sand 回复

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

  4. skyoy 回复

    手机上生效,pc端打开不生效。

    1. Oconner 回复

      可能是设置问题,我这边没有问题的

  5. 吖吖 回复

    真的是太棒

    1. Oconner 回复

      谢谢,大家的支持是我前进的动力

  6. vip 回复

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

    1. Oconner 回复

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

  7. years 回复

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

    1. Oconner 回复

      微信图标和二维码相邻放置就可以

      1. years 回复

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

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

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

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

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

  8. 鹇鱼 回复

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

    1. 智慧宫 回复

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

  9. 预见未来的喵喵 回复

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

    1. 智慧宫 回复

      互相学习,互相进步

  10. 膜苞 回复

    不错不错,您老这个思路非常好

    1. 智慧宫 回复

      互相学习

  11. 花花牛 回复

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

    1. 智慧宫 回复

      就是根目录下的style.css 里面,全局都会起作用

      1. 花花牛 回复

        哦哦找到了,谢谢