鼠标悬停实现显示与隐藏二维码效果

最新推荐文章于 2021-05-27 18:05:59 发布

just_花生

最新推荐文章于 2021-05-27 18:05:59 发布

阅读量5.5k

点赞数 7

分类专栏：前端

本文链接：https://blog.csdn.net/zhiyinweini3/article/details/104419672

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

背景：学习前端知识，自己做页面
目的：学习前端知识
组网图：不涉及
工具：vscode1.41.0
简介：鼠标悬停实现显示与隐藏二维码效果；
鼠标悬停实现显示与隐藏二维码效果，实现的效果如下：
鼠标悬停在微信图标显示二维码（是我的微信二维码哦……），移开隐藏二维码，
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二维码的动态效果</title>
    <style>
        body {
            margin: 0px;
        }

        #box {
            width: 100%;
            height: 100px;
            background-color: black;

            position: fixed;
            bottom: 0px;
        }

        #wechat {
            width: 44px;
            height: 44px;

            background-image: url("imgs/wechat.png");
            background-repeat: no-repeat;
            background-size: 100%;

            margin: 28px auto;

            position: relative;
        }

        #code {
            display: none;

            width: 180px;
            height: 180px;
            background-color: white;

            background-image: url("imgs/code.png");
            background-repeat: no-repeat;
            background-size: 100%;

            position: absolute;
            left: -66px;
            bottom: 70px;
        }

        #wechat:hover {
            background-image: url("imgs/wechatH.png");
        }

        #wechat:hover>#code{
            display: block;
        }
    </style>
</head>
<body>
    <!-- 用于包含二维码所有的内容，显示在页面中的底部 -->
    <div id="box">
        <!-- 用于显示微信图标 -->
        <div id="wechat">
            <!-- 用于显示，隐藏二维码图片 -->
            <div id="code"></div>
        </div>
    </div>
</body>
</html>