注册 登录 天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制

教程

分享一些有关于zblog的教程,这里有zblog初级教程、zblog中级教程和zblog进阶版教程,如果对你有所帮助,深感荣幸

当前位置:网站首页 教程 正文

纯css实现鼠标移上去出现图片鼠标移开隐藏的效果

天兴工作室管理 2016-01-03 教程 2136 ℃ 1 评论

前几天根据一个客户需求写这个东西,需求大意很简单。一行字“关注微信公众号”,鼠标放到这行字上就出现一个微信二维码的图片,鼠标移开则二维码图片隐藏

这东西本来准备用js开搞的,最后实在是懒于是直接用css开搞。搞完了整理了下代码发出来,希望能帮助到有需要的人。

代码很简单,html代码是这样:

<div class="weixin"><a href="javascript:;">关注微信公众号</a><img src="http://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以下)和不支持手机端(因为手机没有鼠标这个东西)

如对以上代码有什么疑问的欢迎在本页下评论区域留言,天兴工作室有时间会一一回复的。

赞 (5)

已有 1 位小伙伴发表了看法

香港独立IP主机

回应ta香港独立IP主机 (游客)

评论于 2016-01-04 15:16:19

纯css实现鼠标移上去出现图片鼠标移开隐藏的效果,如果有演示效果就好了,这样或许更真实

欢迎 发表评论

服务项目

快速入口

常见问题

天兴工作室 | www.txcstx.cn

天兴工作室介绍天兴工作室承接:网站建设、zblog模板和dedecms模板定制、仿站(像素级仿站)、html单页面定制和修改、网站模板修改等服务;我们的办事准则:要么不答应、答应则一定做到

  • 交流群:ZBLOG交流群
  • 客户群:天兴工作室客户群
在线QQ 评论文章