CSS实现鼠标悬停显示二维码

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

特点

1、纯CSS实现二维码展示功能,减少加载JS;

2、使用CSS3 transform 属性;

第一步

在需要展示二维码的地方添加如下代码,其中<a>标签内容可以根据需要修改成图片等,href=”javascript:”表示<a>标签作为按钮使用,不做跳转,实现url访问拦截。

第二步

在样式表style.css中添加如下代码

首先父元素添加相对定位,然后以”:after” 伪元素在<a></a>元素的内容之后插入二维码;transform: scale(0)和opacity: 0实现二维码隐藏。

第三步

同样在style.css中添加如下代码

当鼠标经过时显示二维码。

另一种方法(推荐)

上面的代码中使用了”:after”伪类元素,是在css中引入二维码文件,其实我们也可以利用 img标签将二维码图片放在html中,结构如下:

自然css样式也要做相应的改变,如下:

无论使用哪一种方式都能够实现鼠标悬停弹出二维码功能,chrafz推荐使用第二种方法,因为这种方法比较容易修改二维码路径。

演示:

点击进入查看演示

本文由 @张弦先生 原创发布.如若转载,请注明出处:张弦先生-chrafz.com » CSS实现鼠标悬停显示二维码
分享到:
赞(19) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏