ps:這个效果是用css中的伪类:hover实现的,因此只适合在电脑端界面使用,在手机端是无效的(因为手机没有鼠标這个东西。。。)
之前有写过一篇“纯css实现鼠标移上去出现图片鼠标移开隐藏的效果”,這个还是有个缺陷,就是一排只能出现一个這样的效果,例如我们要在网站顶部放微信二维码,微博二维码,支付宝二维码,那么之前写的那篇文章是实现不了的。
本文就是介绍用纯css写的鼠标放上去后显示二维码的一排多个版,先上效果图:
大概就是上面的效果,那么就开始上代码了。
html代码结构是這样的:
<div class="top"> <a href="#" class="top-weixin"> <div><img src="图片地址"></div> </a> </div>
css代码是這样的:
.top a{display: inline;background:url(img/top_bj.jpg) 0 0 no-repeat;position: relative;} .top-weixin div{left: -999em;position: absolute;overflow: visible;padding-top: 27px;width: 150px;height: 150px;z-index: 999;} .top-weixin img{margin-left: -75px;width:98%;height:auto;} .top-weixin:hover div{left: auto;}
多个的话上面的复制多个即可。有bug欢迎指出。
相关推荐
- 天兴工作室:生成收款二维码合集页面插件11-19
- zblog给每篇文章生成二维码功能代码01-08
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 2vue3项目引入vant报错的错误原因和解决办法03-12
- 3天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 4zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 5天兴工作室2023双11活动:五折优惠券大放送11-05
- 6腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 7新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 8天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 9[已下线] 天兴工作室2023双节活动:五折优惠券09-29
- 标签聚合
- ×1畅言实验室×1zblog分页×1畅言评论数×4右侧栏×1图片加alt×1zblog伪静态设置×7zblog后台×1文件重建×2html×1A5×1堆栈跟踪×2ssl证书×2附件管理×1新闻×3安装zblog×1子分类列表×3mip主题×4zblog会员×1乐视云视频×1zblogphp安装
最新评论
-
天兴工作室
03-21对的,下个版本会修复 -
访客
03-20此模版多张并排图片,不管点哪张图,都显示第一张,且没有轮播按钮,只能手动关闭。 系统:win7+火狐浏览器 -
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求
有 1 位网友评论: