鼠标悬停时，显示二维码

不好意思，此人不存在

于 2021-05-27 18:05:59 发布

阅读量1.8k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_44278908/article/details/117334374

版权

该博客介绍了一个HTML和JavaScript实现的鼠标悬停显示二维码的功能。当鼠标移到链接上时，二维码图片显示；鼠标离开时，图片隐藏。文章探讨了如何通过事件监听和CSS类切换来控制二维码的显示与隐藏，但提到了悬停时二维码可能会遮挡部分内容的问题。

摘要由CSDN通过智能技术生成

鼠标悬停，显示二维码

<!DOCTYPE html>
<html lang="en">
<head lang="en">
    <meta charset="utf-8">
    <title>Document</title>
    <style>
        .code{
            width: 50px;
            height: 50px;
        }
        .code a{
            display: block;
            width: 50px;
            height: 50px;
            /* background:url(/img/20180127_QRcode_small.png) no-repeat -159px --51px; */
            position: relative;
        }
        .code-big{
            position: absolute;
            top:10px;
            left: 80px;
        }
        .hide{
            display: none;
        }
        .show{
            display: block;
        }

    </style>
    <script>
        window.onload=function(){
            //需求：鼠标放到a链接上，显示二维码（添加show类名，去掉hide类名）
            //      鼠标移开链接，隐藏二维码（添加hide类名，去掉show类名）

            // 1.获取事件源和相关元素
            var a =document.getElementsByTagName("a")[0];
            var div =document.getElementsByClassName("code-big")[0];
            // 2.绑定事件
            a.onmousemove=fn1;  // 鼠标悬停时
            a.onmouseout = fn2;  //鼠标离开时

            // 定义方法
            function fn1(){
                // 3.书写事件驱动程序
                div.className="code-big show";
            }
            function fn2(){
                div.className="code-big hide";
                // 了解字符串操作，将字符串中的hide替换成show。
                
            }
        }
    </script>
</head>
<body>
    <div class="code">
        <a href="#">shocklock</a>
        <img src="/img/2.jpg" alt="" class="code-big hide"/>
    </div>
</body>
</html>