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

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

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

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