鼠标移入显示二维码(原生、JQURY两种方式)

效果是这样滴~~

JQUERY的方式


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <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;
            display: none;
        }
        .nodeSmall a {
            display: block;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
        <div class="nodeSmall" id="node_small">
            <a href="#"></a>
            <div class="erweima" id="er">
                <img src="images/456.png" alt=""/>
            </div>
        </div>
</body>
<script>
    window.onload = function () {
        a("#node_small","#er");
    }
    function a(a,b) {
        $(a).mouseover(function () {
            $(b).css("display","block");
        });
        $(a).mouseout(function () {
            $(b).css("display","none");
        });
    }
</script>
</html>

原生JS实现


<!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;
            display: none;
        }
        .nodeSmall a {
            display: block;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
<div class="nodeSmall" id="node_small">
    <a href="#"></a>
    <div class="erweima" id="er">
        <img src="images/456.png" alt=""/>
    </div>
</div>
</body>
</html>
<script>
    var node_small = document.getElementById("node_small");
    var er = document.getElementById("er");

    node_small.onmouseover = function(){
        er.style.display = "block"
    }
     node_small.onmouseout = function(){
        er.style.display = "none"
    }
</script>