提供zblog模板_zblog主题_wordpress模板的下载和定制
当前位置:网站首页 > 教程 > 正文

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

天兴工作室 2016-05-14 教程 8627 2 评论


ps:這个效果是用css中的伪类:hover实现的,因此只适合在电脑端界面使用,在手机端是无效的(因为手机没有鼠标這个东西。。。)

之前有写过一篇“纯css实现鼠标移上去出现图片鼠标移开隐藏的效果”,這个还是有个缺陷,就是一排只能出现一个這样的效果,例如我们要在网站顶部放微信二维码,微博二维码,支付宝二维码,那么之前写的那篇文章是实现不了的。

本文就是介绍用纯css写的鼠标放上去后显示二维码的一排多个版,先上效果图:

纯css做的鼠标放上去后显示二维码升级版 鼠标效果 二维码 纯css 教程 第1张

纯css做的鼠标放上去后显示二维码升级版 鼠标效果 二维码 纯css 教程 第2张

纯css做的鼠标放上去后显示二维码升级版 鼠标效果 二维码 纯css 教程 第3张

大概就是上面的效果,那么就开始上代码了。

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

没有找到解决你问题的教程?

您可以试着搜索一下或者直接在线提问。我们也提供收费技术支持,有需要可以在线联系我们。

在线提问 在线客服

2 位网友评论:

取消回复欢迎 发表评论:

  • 请填写验证码
  • 最新文章
  • 热文排行
  • 最多评论
标签聚合
×59zblog模板×35zblog×28zblogphp×20zblogphp模板×20天兴工作室×19阿里云×14zblog插件×14zblog错误×12dedecms×12zblog企业模板×11电子券×11ytcms×11zblog安装×10天兴互联×9随意打×9模板×9zblogphp1.5×8天兴通讯×8刷机×8企业模板

请登录

社交账号登录

将本文分享给你的朋友们