CSS中影藏及显示元素的方式

最新推荐文章于 2023-05-26 18:05:58 发布

周巴帝

最新推荐文章于 2023-05-26 18:05:58 发布

阅读量694

点赞数

分类专栏： web 文章标签： css css3 html

本文链接：https://blog.csdn.net/Hello_super/article/details/122874313

版权

web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

HTML中 CSS影藏元素的两种方式

方式一：

通过display: none来实现，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏框</title>
    <style>
        .box1{
           width: 200px;
           line-height: 30px;
           background-color: orange;
           margin: 0 auto;
           text-align: center;
           position: relative;
           /* 将鼠标变成小手状态 */
           cursor: pointer;
        }
        .qrcode{
            display: none;
            width: 30px;
            height: 30px;
            position: absolute;
            left: 0px;
            right: 0px;
            margin: auto;
        }
        .qrcode img{
            width: 30px;
        }
        .box1:hover .qrcode{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box1">
        二维码
        <div class="qrcode">
            <img src="./img/myblog.png" alt="">
        </div>
    </div>
</body>
</html>

方式二：

通过transition来实现，具体实现方式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏框</title>
    <style>
        .box1{
           width: 200px;
           line-height: 30px;
           background-color: orange;
           margin: 0 auto;
           text-align: center;
           position: relative;
           cursor: pointer;
        }
        .qrcode{
            width: 30px;
            /* height: 30px; */
            height: 0px;
            overflow: hidden;
            position: absolute;
            left: 0px;
            right: 0px;
            margin: auto;
            /* 当height发生变化时，会花费0.3s的时间来进行过度。 */
            transition: height 0.3s;
        }
        .qrcode img{
            width: 30px;
        }
        .box1:hover .qrcode{
            display: block;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="box1">
        二维码
        <div class="qrcode">
            <img src="./img/myblog.png" alt="">
        </div>
    </div>
</body>
</html>