美文网首页
dom_11 二维码显示

dom_11 二维码显示

作者: basicGeek | 来源:发表于2018-11-22 17:03 被阅读0次
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .nodeSmall {
            width: 50px;
            height: 50px;
            background: url(images/bgs.png) no-repeat -159px -51px;
            position: fixed;
            right: 10px;
            top: 40%;
        }
        .erweima {
            position: absolute;
            top: 0;
            left: -150px;
        }
        .nodeSmall a {
            display: block;
            width: 50px;
            height: 50px;
        }
        .hide {
            display: none;
        }

        .show {
            display: block;
        }
    </style>
</head>
<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>
//    //获取dom对象
//    var node = document.getElementById("node_small");
//    //注册事件  鼠标经过mouseover和鼠标离开mouseout
//    node.onmouseover = function () {
//       //显示二维码
//        var er = document.getElementById("er");
//        er.className = "erweima show";
//    };
//
//
//    node.onmouseout = function() {
//        var er = document.getElementById("er");
//        //隐藏二维码
//        er.className = "erweima hide";
//    }


        //获取dom对象
        var node = document.getElementById("node_small");
        //注册事件  鼠标经过mouseover和鼠标离开mouseout
        node.onmouseover = function () {
            //显示二维码
            var er = document.getElementById("er");
            er.className = er.className.replace("hide","show");
        };


        node.onmouseout = function() {
            var er = document.getElementById("er");
            //隐藏二维码
            er.className = er.className.replace("show","hide");
        }
</script>

</body>
</html>
显示显示

相关文章

网友评论

      本文标题:dom_11 二维码显示

      本文链接:https://www.haomeiwen.com/subject/kqzlqqtx.html