天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制 | RSS订阅 | 网站地图 | 联系我们
天兴工作室自用主题2015版上架销售 国庆开开心心
当前位置:网站首页 教程 正文

纯css做的鼠标放上去后显示二维码升级版

天兴工作室 5个月前 (05-14) 教程 850 ℃ 2 评论
内容加载中......

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欢迎指出。

我要提问 如果你对于此文还有任何疑问欢迎在文章下面的评论区域留言,如果你的疑问比较多,欢迎在本站的在线提问专业去发布问题,点击右侧的我要提问即可到达。天兴工作室将尽我所能为你解答问题。

本文标签纯css 二维码 鼠标效果

本文地址http://www.txcstx.cn/post/973.html

版权说明:如非注明,本站文章均为 天兴工作室 原创,转载请注明出处和附带本文链接。

我猜你还喜欢这些...

哈哈,本文已有 2 位小伙伴发表了看法:

1#微西风博客 (游客)  评论于 2016-05-21 14:53:42回应ta
你的网站是不是被黑了 http://www.029hanguo.com/ 这个跟你的一样
1#天兴工作室 (管理员)  评论于 2016-05-22 15:28:47回应ta
被镜像或者采集了,谢谢告知

欢迎 发表评论

必填

选填

选填

必填

◎欢迎在这里交流反馈,垃圾评论会秒删的额...

联系我们
最新评论
标签云
zblog1.3半年包联通商城zbp模板在线QQ客服dedecms5.7ME722刷机zblogphp视频主题在线预订zblogphp单篇文章回家emlog免费模板3G手机铁通光纤主机寒假预存话费送礼zblog淘宝客模板keywords收费模板右键版权双11随意打科技博客动感双城号瀑布流recovery模块管理新闻卖模板常见问题上网卡下拉导航电影模板玩博客再见2015红色企业模板
热门模板