元素显示与隐藏的几种方式

最新推荐文章于 2023-04-14 17:05:16 发布

panliyou

最新推荐文章于 2023-04-14 17:05:16 发布

阅读量625

点赞数

分类专栏： html和css的那些事 web前端开发文章标签： css3 html

本文链接：https://blog.csdn.net/weixin_39411655/article/details/112791608

版权

html和css的那些事同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

web前端开发

8 篇文章 0 订阅

订阅专栏

元素显示与隐藏的几种方式

1.display:none;（常用）
元素隐藏且在文档中部不占位置，不会影响其它结构
transition（过渡），没有过渡效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 100px;
            width: 200px;
            height: 200px;
            line-height: 200px;
            color: white;
            background-color: tomato;
        }

        .box:hover {
            display: none;

        }
    </style>
</head>

<body>
    <div class="box">鼠标移动到我这我就会消失</div>
</body>

</html>

visibility: hidden;
元素隐藏且在文档中部占位置，会影响其它结构，仍具有高度、宽度等属性值
transition（过渡），没有过渡效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 100px;
            width: 200px;
            height: 200px;
            color: white;
            background-color: tomato;
        }

        .box:hover {
            /* 它的位置还在，鼠标移动的时候会出现抖动 */
            visibility: hidden;
        }
    </style>
</head>

<body>
    <div class="box">你只是看不见我其实我还在</div>
    <div class="son">我怎么在这里,原来是你还在噢，占着茅坑不拉屎啊你</div>
</body>

</html>

overflow: hidden;
元素里面的内容超出部分隐藏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 100px;
            width: 200px;
            height: 200px;
            /* line-height: 200px; */
            /* color: black; */
            background-color: tomato;
        }

        .box:hover {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box">
        鼠标移动到我这里，超出部分隐藏
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae in modi ducimus, et numquam minus vero totam
        asperiores pariatur non sint! Amet enim, distinctio numquam explicabo nulla et eveniet dolore?
    </div>

</body>

</html>

opacity: 0;
元素的透明度为0，在文档中部占位置，仍具有高度、宽度等属性值
transition（过渡），有过渡效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 100px;
            width: 200px;
            height: 200px;
            color: white;
            background-color: tomato;
        }

        .box:hover {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="box">鼠标移动到我这里，我的透明度改为0你看不见我哈哈</div>
</body>

</html>

panliyou

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
元素显示与隐藏的几种方式

元素显示与隐藏的几种方式1.display:none;（常用）元素隐藏且在文档中部不占位置，不会影响其它结构transition（过渡），没有过渡效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫