HTML常见的几种元素隐藏方式

最新推荐文章于 2024-04-06 11:06:44 发布

narutozoro111

最新推荐文章于 2024-04-06 11:06:44 发布

阅读量975

点赞数

文章标签：隐藏 html

本文链接：https://blog.csdn.net/narutozoro111/article/details/103017041

版权

css隐藏方式

    1.display: none;（彻底隐藏，所有的子元素也隐藏） 重新显示：display：block；
    2.heght: 0px;（当前元素隐藏，子元素不隐藏）重新显示：height：100px；（高度不为0）
    3.visibility：hidden（样式隐藏位置还依然占据）
    4.删除dom元素：显示时候在进行添加dom元素（难懂）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    /* 隐藏元素 */
    .hidden{
        visibility: hidden;
    }
    .tab{
        width: 200px;
        height: 50px;
        padding: 5px 10px;
        background-color: #000;
        color: #f1f1f1f1;
    }
    #view{
        width: 200px;
        height: 100px;
        background-color: aqua;
        /* 初始化样式为隐藏状态 */
        display: none;
    }

    /* 当鼠标移动到.tab 元素时，触发.tab子元素#view样式 */
    .tab:hover>#view{
        /* 当鼠标移到父元素.tab上是：显示子元素#view */
        display: block;
    }
    .box:hover{
        background-color: yellow;
    }
</style>
<body>
    
     <div class="wraper">
         <div class="tab">
             鼠标放上来有惊喜
                <div id="view">
                        我是显示隐藏的内容
                    </div>
         </div>
         
     </div>
     <div class="hidden box"></div>
     <div class="box"></div>
</body>
</html>

narutozoro111

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML常见的几种元素隐藏方式

css隐藏方式 1.display: none;（彻底隐藏，所有的子元素也隐藏）重新显示：display：block； 2.heght: 0px;（当前元素隐藏，子元素不隐藏）重新显示：height：100px；（高度不为0） 3.visibility：hidden（样式隐藏位置还依然占据） 4.删除dom元素：显示时候在进行添加dom元素（难懂）<!D...
复制链接

扫一扫