效果图
这个二维码图片是可以用绝对定位控制位置的
实现代码
图片路径由于是本地,为了效果大家需要的自己设置图片路径
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.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;}
</style>
</head>
<body>
<div class="weixin"><a href="javascript:;">关注微信公众号</a><img src="img/ec.png" /></div>
</body>
</html>
补充说明
.weixin img{ display:none;}
position:relative;相对定位
position:absolute;绝对定位
我有一篇文章详细解释了相对定位和绝对定位的这里也不重复了
这个是隐藏图片显示的