鼠标经过显示微信二维码js代码

这是一个非常简单的鼠标悬停经过显示二维码js效果，鼠标离开隐藏微信二维码，代码相当简洁。二维码显示位置上下左右可自己调整，目前非常的流行，很多网站都有这种鼠标经过展示二维码的效果

分类：悬浮层/弹出层 > 悬浮层难易：入门级

查看演示下载资源下载积分： 10 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标经过显示微信二维码js代码</title>
<style>
*{ margin:0; padding:0; list-style:none}
body{ background:#E6F0F3;}

.weixin{ width:30px; height:30px; margin:100px auto;position:relative; font-size:12px; text-align:center;}
.weixin a{width:30px; height:30px; display:block; position:absolute; left:0; top:0;background:url(images/weixin.png) no-repeat center top; }
.weixin .weixin_nr{width:100px; height:120px; padding:10px; background:#fff; text-align:center; position:absolute; left:-45px; top:45px; display:none;}
.weixin .weixin_nr img{ margin-bottom:5px;}
.weixin .weixin_nr .arrow{ width:0; height:0; border-bottom:10px solid #fff;border-left:10px solid transparent;border-right:10px solid transparent; position:absolute; left:50px; top:-10px;}
.weixin.on .weixin_nr{ display:block;}
.weixin.on a{ background:url(images/weixin.png) no-repeat left bottom;}
</style>
</head>
<body>

<!--代码部分begin-->
<div class="weixin" onmouseover="this.className = 'weixin on';" onmouseout="this.className = 'weixin';">
	<a href="javascript:;"></a>
    <div class="weixin_nr">
    	<div class="arrow"></div>
        <img src="images/weixin.jpg" width="100" height="100" />
        关注官方微信
    </div>
</div>
<!--代码部分end-->

</body>
</html>