div内容隐藏显示

最新推荐文章于 2022-07-13 14:22:54 发布

ZZCY你学会了吗

最新推荐文章于 2022-07-13 14:22:54 发布

阅读量545

点赞数 1

文章标签： css html5

本文链接：https://blog.csdn.net/weixin_50560642/article/details/110563475

版权

div内容隐藏显示

display:none;清除元素，元素撤销消失，使用后元素不会再文档流中占据原来的位置，浏览器不会解析元素，不会被子元素继承；

display:none;
显示一个元素：配合 display:block; 做到显示被清除的元素；
display:block;

<style>
       div{
           width: 100%;        设置宽度；
           height: 150px;       设置高度；
           background-color: tomato;   设置背景元素；
       }
       div:nth-child(even){          设置div标签偶数背景颜色；div标签但是连一起，单独设置颜色；
           background-color: yellow;
       }
       div:nth-child(2){        给第二个div设置隐藏样式；
           display: none;
           /* visibility: hidden; */
       }
       body:hover div:nth-child(2){           设置鼠标悬浮body时，第二个div显示样式；
           display: block;
           /* visibility: visible; */
       }
   </style>
<body>
   <div>1</div>
   <div>2 </div>
   <div>3</div>
   <div>4</div>
</body>

第二个div设置清除样式时，div2连位置都被清除了；
在这里插入图片描述

当鼠标悬浮在body上时，显示了被清除的div样式；

在这里插入图片描述
hidden隐藏元素：是视觉上的消失，在文档流中占据原来的位置，浏览器会解析元素，不会被子元素继承；
visibility:hidden;
visible:默认值，显示元素，配合visibility:hidden;使用；
visibility：visible；

<style>
        div{
            width: 100%;        设置宽度；
            height: 150px;        设置高度；
            background-color: tomato;    设置背景元素；
        }
        div:nth-child(even){          设置div标签偶数背景颜色；div标签但是连一起，单独设置颜色；
            background-color: yellow;
        }
        div:nth-child(2){        给第二个div设置隐藏样式；
            visibility: hidden; 
        }
        body:hover div:nth-child(2){           设置鼠标悬浮body时，第二个div显示样式；
     visibility: visible;
        }
    </style>
<body>
    <div>1</div>
    <div>2 </div>
    <div>3</div>
    <div>4</div>
</body>

当div2设置了隐藏元素，div2被隐藏但它的样式还是会被浏览器解析，位置还是在的
在这里插入图片描述

当鼠标悬浮body上时，隐藏的div2样式显示出来；利用清除元素还可以实现简易的下拉菜单；
在这里插入图片描述

<style>
        div{
            width: 100%;        设置宽度；
            height: 150px;        设置高度；
            background-color: tomato;    设置背景元素；
        }
        div:nth-child(even){          设置div标签偶数背景颜色；div标签但是连一起，单独设置颜色；
            background-color: yellow;
        }
        div:nth-child(2){        给第二个div设置隐藏样式；
            display: none;
            /* visibility: hidden; */
        }
        body:hover div:nth-child(2){           设置鼠标悬浮body时，第二个div显示样式；
            display: block;
            /* visibility: visible; */
        }
        }
        body:hover div:nth-child(3){     设置鼠标悬浮body时，第三个div清除样式；
            display: none;
        }
    </style>
<body>
    <div>1</div>
    <div>2 </div>
    <div>3</div>
    <div>4</div>
</body>

鼠标未悬浮在body时样式；在这里插入图片描述

鼠标悬浮body时，显示了清除的div2样式，但是同时div运行了清除样式；就这样实现了简易的下拉菜单样式；鼠标悬浮body时，显示了清除的div2样式，但是同时div运行了清除样式；就这样实现了简易的下拉菜单样式；在这里插入图片描述

ZZCY你学会了吗

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
div内容隐藏显示

隐藏显示display:none;清除元素，元素撤销消失，使用后元素不会再文档流中占据原来的位置，浏览器不会解析元素，不会被子元素继承；display:none;显示一个元素：配合 display:block; 做到显示被清除的元素；display:block;<style> div{ width: 100%; 设置宽度； height: 150px; 设置高度； backgrou
复制链接

扫一扫