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

来源：互联网发布：淘宝电子烟店铺排名编辑：程序博客网时间：2024/05/21 13:56

效果是这样滴~~
这里写图片描述

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>

阅读全文

0 0