CSS 实现鼠标悬停弹出图片

特点

  • CSS 实现,减少加载 JS
  • 使用 CSS3 transform 属性

实现

利用 img 标签将二维码图片放在 a 标签链接中,为了防止跳转 href 超链接写 "javascript:void(0)"

<!-- 自己加的页脚微信展示开始 -->
<a id="weixin" href="javascript:void(0)">
    <i class="fa fa-weixin"></i>
    <img src="http://你的路径/qrcode.jpg">
</a>
<!-- 自己加的页脚微信展示结束 -->

编写如下 css 样式:

/*页脚微信效果开始*/
a#weixin {
    position: relative;
}
#weixin img {
    visibility: hidden;
    opacity: 0;
    transform: translate(0, 10px);
    transition: all 0.3s ease-in-out;
    position: absolute;
    right: -30px;
    bottom: 40px;
    width: 150px;
    height: 150px;
}
#weixin:hover img {
    visibility: visible;
    transform: translate(0, 0px);
    opacity: 1;
}
/*页脚微信效果结束*/

参考

http://16bing.com/2017/03/07/css-transform/


 上一篇
Nginx配置Https Nginx配置Https
申请阿里云 ssl 证书进入阿里云域名管理中点击你要升级为 https 的域名,基本信息中点击免费开启 SSL 证书。点击申请后,授权系统自动添加TXT解析记录,自动完成域名授权验证。等待几分钟,审核通过后,证书状态变为 “已签发” 后证书
2019-06-16
下一篇 
遇到多个构造器参数时要考虑使用构建器 遇到多个构造器参数时要考虑使用构建器
前言静态工厂和构造器有个共同的局限性:它们都不能很好地扩展到大量的可选参数。对于有很多可选参数的类,程序员一向习惯采用重叠构造器模式,在这种模式下,提供的第一个构造器只有必要的参数,第二个构造器有一个可选参数,第三个构造器有两个可选参数,以
2019-05-14
  目录