前几天根据一个客户需求写这个东西,需求大意很简单。一行字“关注微信公众号”,鼠标放到这行字上就出现一个微信二维码的图片,鼠标移开则二维码图片隐藏。
这东西本来准备用js开搞的,最后实在是懒于是直接用css开搞。搞完了整理了下代码发出来,希望能帮助到有需要的人。
代码很简单,html代码是这样:
<div class="weixin"><a href="javascript:;">关注微信公众号</a><img src="https://www.txcstx.cn/gg/zfb.png" /></div>
css代码是这样:
.weixin{ display:block;text-align:center; position:relative;} .weixin img{ display:none;} .weixin:hover img{ position:absolute; left:50%; top:0; margin-left:-115px; padding-top:30px; display:block;}
这个效果是用的css里面的伪类“hover”实现的,优点是代码特别特别的简单,缺点是兼容性不太好(ie8以下)和不支持手机端(因为手机没有鼠标这个东西)
如对以上代码有什么疑问的欢迎在本页下评论区域留言,天兴工作室有时间会一一回复的。
相关推荐
- translate3d和z-index冲突导致z-inde值无效的解决办法01-10
- 用腾讯企业邮做为邮件服务器来发送通知邮件的操作步骤09-18
- zblog搜索为什么不太准?zblog搜索的调用逻辑04-30
- 宝塔面板安装php失败:提示No package 'libjpeg' found的解决办法04-03
- zblog首页/分类/内容页标题副标题等seo标签详解03-17
- qlv视频怎么转码?腾讯视频如何直接下载mp4视频?03-10
- phpmyadmin导出数据库时报错:Fatal error:Cannot 'break' 2 levels in02-13
- 宝塔面板和云锁冲突导致Nginx或者Apache无法安装 01-15
- swf文件做背景时自适应宽高的解决办法10-10
- zblog会员可以上传图片的权限设置详细步骤10-06
取消回复欢迎 你 发表评论:
- 最新文章
- 热文排行
- 最多评论
- 1zblog1.7版本“固定网站域名”按钮不见了怎么办?zblog固定网站域名功能设置步骤04-19
- 2zblog升级1.7报错“Invalid argument supplied for foreach”或者“unserialize(): Error at offset”的解决办法04-11
- 3wordpress面包屑导航怎么写?wordpress面包屑导航代码04-07
- 4wordpress页面调用指定模板的方法03-30
- 5天兴工作室wordpress娱乐资源主题 搭积木首页+多种列表样式03-21
- 6wordpress分类调用标签函数大全03-13
- 7wordpress调用今日发布文章数量和总文章数量的方法03-12
- 8天兴工作室zblog在线表单插件03-10
- 9天兴工作室:zblog在线表单插件使用视频教程03-10
- 标签聚合
- ×1团圆无忧卡×1彩信包×1下拉菜单×1zblog后台登录密码×12016年春节×1在线QQ客服×1装操作系统×1zblogphp1.5错误×1指定文章×1win8平板×13G国际长途优惠包×1三星 I9228×1天翼3G×1合家欢促销×1春季返城×1同栏目文章×1自助缴费×1淘宝搜索代码×1js特效×1emlog免费模板
最新评论
-
离心泵
谢谢老师的教导 -
鹏仔先生
求一个付费的 zblogphp 评论插件,输入QQ 获取QQ头像 名称 这种,带评论点赞。 评论于:天兴工作室zblog在线表单插件
-
鹏仔先生
给力 -
青梅工作室
大佬不错哈! -
akrin
请问 网站证书过期,导致无法登录后台,如何去掉https资源的自动跳转 谢谢
有 1 位网友评论:
香港独立IP主机 5年前 (2016-01-04) 回复
纯css实现鼠标移上去出现图片鼠标移开隐藏的效果,如果有演示效果就好了,这样或许更真实