JS之显示和隐藏二维码

目的：

鼠标放到a链接上，显示二维码(添加show类名，去掉hide类名)

鼠标移开a链接，隐藏二维码(添加hide类名，去掉show类名)

代码如下：

<body>
<div class="nodeSmall" id="node_small">
<a href="#"></a>
<div class="erweima hide" id="er">
<img src="../images/456.png" alt=""/>
</div>
</div>

<script type="text/javascript">
//需求：鼠标放到a链接上，显示二维码(添加show类名，去掉hide类名)
//      鼠标移开a链接，隐藏二维码(添加hide类名，去掉show类名)
//      步骤：
//      1.获取事件源和相关元素
var a = document.getElementsByTagName("a")[0];
var div = document.getElementsByClassName("erweima")[0];
//      2.绑定事件
a.onmouseover = function fn1(){
 div.className = "erweima show";

}
a.onmouseout = function fn2(){
    div.className = "erweima hide";
}
//      3.书写事件绑定程序

</script>
</body>

 

posted @ 2017-12-18 11:38  乖乖乖码  阅读(1802)  评论(0)  编辑  收藏  举报