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欢迎指出。
相关推荐
- zblog给每篇文章生成二维码功能代码01-08
取消回复欢迎 你 发表评论:
- 最新文章
- 热文排行
- 最多评论
- 1zblog判断插件是否安装或者启用的代码介绍01-16
- 2translate3d和z-index冲突导致z-inde值无效的解决办法01-10
- 3zblogphp提示“ Call to undefined function openssl_pkey_get_public()”的原因和解决办法12-25
- 4zblogphp1.6版本报错“非法访问”的原因和解决办法12-23
- 5wordpress导航栏自定义添加class和rel="nofollow"的步骤12-13
- 6swiper做导航栏时自动跳转至对应分类的代码12-07
- 7zblogphp自带js框架评论接口大全12-04
- 8wordpress提示"Error establishing a database connection"的解决办法11-10
- 9诈尸?dedecms发新版了!DedeCMSV6正式发布 dedecms最新版下载11-03
- 标签聚合
- ×1三星I9308×1驱动×1读者墙×1年包×1骗局×1乐享3G×1电脑端主题×13G副卡×1PUK码×1谷歌在线字体库×1zblogphp会员中心×1天翼易通卡×1校园大V网×1移动积分×1话费有效期×1地域×1无聊×1美工×1暗色系主题×1小熙博客
最新评论
-
吸料机
已经解决 -
xinling2020.com
我今天在路上还在想我的个人博客要是写到1W文章数量会不会崩,看到这几十万我就放心了。这辈子也不可能有这样的数据~!哈哈 -
访客
不知道百度**收录怎么样 -
天兴工作室
这玩意你看下php手册啊https://www.php.net/manual/zh/function.date.php,m就是星期几 -
风羽
PHP版没有直接的星期几哦,找了好久没有,只能用JS转换~
有 2 位网友评论:
微西风博客 5年前 (2016-05-21) 回复
你的网站是不是被黑了 http://www.029hanguo.com/ 这个跟你的一样
天兴工作室 5年前 (2016-05-22) 回复
被镜像或者采集了,谢谢告知