前几天根据一个客户需求写这个东西,需求大意很简单。一行字“关注微信公众号”,鼠标放到这行字上就出现一个微信二维码的图片,鼠标移开则二维码图片隐藏。
这东西本来准备用js开搞的,最后实在是懒于是直接用css开搞。搞完了整理了下代码发出来,希望能帮助到有需要的人。
代码很简单,html代码是这样:
<div class="weixin"><a href="javascript:;">关注微信公众号</a><img src="https://www.txcstx.com/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以下)和不支持手机端(因为手机没有鼠标这个东西)
如对以上代码有什么疑问的欢迎在本页下评论区域留言,天兴工作室有时间会一一回复的。
相关推荐
- zblog登录后台一直提示验证码错误的原因和解决方法03-01
- zblog使用api提交post数据提示419错误的原因和解决方法02-23
- vue3项目引入vant报错的错误原因和解决办法03-12
- zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 微信支付JSPAI调起支付后提示“该订单已过期,请重新下单”的解决办法06-11
- 宝塔一键迁移提示“连接服务器失败”的原因和解决办法05-16
- 微信小程序报错:operateWXDataForAd:fail的原因和解决办法05-14
- php保存添加bom头的txt文件和读取时去除txt的bom头05-02
- 小程序使用mp-html组件后输出空白的原因和解决办法04-08
- zblog获取全部分类列表函数GetCategoryList的参数和使用方法介绍说明03-30
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1zblog登录后台一直提示验证码错误的原因和解决方法03-01
- 2zblog使用api提交post数据提示419错误的原因和解决方法02-23
- 3天兴工作室2025年春节放假公告01-25
- 4天兴用户中心插件“微信通知”功能设置教程11-09
- 5阿里云2024双11活动推荐 通过本站链接参与另外赠送本站代金券11-05
- 6天兴工作室官网购物活动:全场8折优惠券 不限次数不限金额04-17
- 7天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 8vue3项目引入vant报错的错误原因和解决办法03-12
- 9天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 标签聚合
- ×1八折×1超过最大回复层数×1修改主题×2虚拟主机×3网站×2微信×1include×1$templates×1宝塔一键迁移×6自适应模板×1bxSlider下载×2端午节×1幻灯片代码×1新增账号×4导航栏×12016年春节×1上传附件×1指定文章×8企业模板×1全屏幻灯片
最新评论
-
天兴工作室
并没有任何限制 -
访客
请问 zblog淘客主题 对使用者的要求是必须是企业吧? -
阿浩
大佬们,丢几个除了作者以外的演示站,我想看看大家的布局设置 -
有趣生活
一直想开发zblog的功能,zblog的敷在不知道够够不够 -
访客
发布文章时候,那怎么改默认状态呢比如改成默认审核状态?
有 1 位网友评论:
香港独立IP主机 9年前 (2016-01-04) 回复
纯css实现鼠标移上去出现图片鼠标移开隐藏的效果,如果有演示效果就好了,这样或许更真实