用DOM实现显示和隐藏二维码

最新推荐文章于 2023-11-24 09:07:56 发布

杏黄的三叶草

最新推荐文章于 2023-11-24 09:07:56 发布

阅读量234

点赞数

分类专栏： Web前端JavaScript

本文链接：https://blog.csdn.net/dwjdj/article/details/104236556

版权

Web前端JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nodeSmall {
            width: 50px;
            height: 50px;
            background: url(../image/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="../image/456.png" alt=""/>
    </div>
</div>
<script src="common.js"></script>
<script>
    //获取鼠标要进入的a标签
    //先获取最外面的div
    var aObj=my$("node_small").getElementsByTagName("a")[0];
    //为a注册鼠标进入
    aObj.onmouseover=function () {
        my$("er").className="erweima show";
    };
    //为a注册鼠标离开
    aObj.onmouseout=function () {
        my$("er").className="erweima hide";
    };
</script>


</body>
</html>

素材如下

在这里插入图片描述

杏黄的三叶草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用DOM实现显示和隐藏二维码

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Title</title> <style> .nodeSmall { width: 50px; ...
复制链接

扫一扫