【Web】CSS实现鼠标悬停实现显示与隐藏特效

鼠标悬停实现显示与隐藏特效

简单记录 - 慕课网 Web前端步骤四：鼠标悬停实现显示与隐藏特效

初步掌握定位的基本使用，以及CSS选择器更高级的运用，完成一个网页中必会的鼠标经过隐藏显示特效。

实现了 enen

<!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; 最下面的 */
        bottom: 0px;
        /*top: 100px;*/
    }

    #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/wechatcode.png");
        background-repeat: no-repeat;
        background-size: 100%;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='male.png', sizingMethod='scale');
        position: absolute;
        left: -66px;
        bottom: 70px;
    }

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

    #wechat:hover>#code {
        display: block;
    }
    </style>
</head>

<body>
    <div style="height: 2000px"></div>
    <!-- 用于包含二维码所有的内容，显示在页面中的底部 -->
    <div id="box">
        <!-- 用于显示微信图标 -->
        <div id="wechat">
            <!-- 用于显示/隐藏二维码图片 -->
            <div id="code"></div>
        </div>
    </div>
</body>

</html>

在这里插入图片描述

二维码动态显示隐藏效果

在这里插入图片描述

移动鼠标到微信图标处动态显示二维码

在这里插入图片描述

渐若窥宏大

发布了85 篇原创文章 · 获赞 11 · 访问量 1万+

私信关注

【Web】CSS实现鼠标悬停实现显示与隐藏 特效

鼠标悬停实现显示与隐藏特效

猜你喜欢

【Web】CSS实现鼠标悬停实现显示与隐藏特效