元素本身隐藏

秋枫 ~

已于 2022-08-07 09:24:10 修改

阅读量106

点赞数

分类专栏： CSS 文章标签： css 前端

于 2022-08-06 19:54:36 首次发布

本文是秋枫 ~原创文章，转载请附上博文链接！

本文链接：https://blog.csdn.net/weixin_43472938/article/details/126199807

版权

CSS 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

本文介绍了CSS中用于隐藏元素的两个关键属性——`visibility: hidden`和`display: none`，它们的区别在于是否保留元素在页面布局中的位置。示例展示了如何通过CSS后代选择器在鼠标悬停时显示隐藏的子元素（son），为用户提供交互效果。

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

元素本身隐藏

场景：让某元素本身在屏幕中不可见。如：鼠标：hover之后元素隐藏
常见属性：
- visibility：hidden
- display：none
区别：
- visibility：hidden 隐藏元素本身，并且在网页中占位置
- display：none 隐藏元素本身，并且在网页中不占位置

此图为三个div

在这里插入图片描述

使用 visibility：hidden 隐藏蓝色方块

.blue    {
            height: 100px;
            width: 100px;
            background-color: blue;
            
            visibility: hidden;
        }

在这里插入图片描述

使用 display：none 隐藏蓝色方块

.blue    {
            height: 100px;
            width: 100px;
            background-color: blue;
            
            display: none;
        }

在这里插入图片描述

案例：默认son元素隐藏，当鼠标移入father后让son显示

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            height: 300px;
            width: 300px;
            background-color: pink;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 隐藏son */
            display: none;
        }
        /* 使用后代选择器，鼠标停留在father内 此时son显示，鼠标离开father时son隐藏 */
        .father:hover .son {
            display: block;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>