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

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

这东西本来准备用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以下)和不支持手机端(因为手机没有鼠标这个东西)

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

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

本文标签图片隐藏 hover

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

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

我猜你还喜欢这些...

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

1#香港独立IP主机 (游客)  评论于 2016-01-04 15:16:19回应ta
纯css实现鼠标移上去出现图片鼠标移开隐藏的效果,如果有演示效果就好了,这样或许更真实

欢迎 发表评论

必填

选填

选填

必填

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

联系我们
最新评论
标签云
zblogasp备份视频播放博客样式wdcp面板子分类积分兑话费读者墙支付宝全球通新入网月套餐费用点对点彩信武汉联通链接栏目清明节瀑布流布局模板设计php710658888zbp免费模板zblog主题无线宽带平安夜存一得三上网卡充100送20G3手机网龄活动随e行二级域名校园基地携号转网ie浏览器测试工具无线宽带G3无线座机超级QQ卡文章
热门模板