首页 > 其他 > 详细

隐藏元素的两种方式

时间:2021-01-21 21:16:03      阅读:7      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 300px;
                height: 300px;
                border: 1px solid red;
            }
            .div1{
                width: 100px;
                height: 100px;
                background-color: yellow;
                
            }
            .box:hover>.div1{
                /*display: none;*/
                visibility: hidden;
            }
            .box2{
                width: 400px;
                height: 400px;
                background-color: yellow;
            }
            .div2{
                width: 200px;
                height: 200px;
                background-color: red;
                /*display: none;*/
                visibility: hidden;
            }
            .box2:hover>.div2{
                /*display: block;*/
                visibility: visible;
            }
            .div3{
                width: 200px;
                height: 50px;
                background-color: gold;
                display: block;
            }
            .div4{
                width: 300px;
                height: 50px;
                background-color: grey;
            }
            .div3:hover+.div4{
                display: none;
            }
        </style>
    </head>
    <body>
        <!--
            隐藏元素的方式
            1.display
              1.1 display:none  隐藏元素
              1.2 display:block/inline/inline-block  显示元素
              
              
            2.visibility
              2.1 visibility:hidden  隐藏元素
              2.2 visibility:visible 显示元素
        -->
        <div class="box">
            <div class="div1"></div>
        </div>
        
        <!--<div class="box2">
            <div class="div2"></div>
        </div>-->
        
        <div class="div3"></div>
        <div class="div4"></div>
        
        <!--
            display和visibility隐藏元素的区别:
            display隐藏的元素会失去自己的位置,其后面的元素会占据隐藏元素之前的位置。
            visibility隐藏的元素会保留自己的位置
        -->
    </body>
</html>

 

隐藏元素的两种方式

原文:https://www.cnblogs.com/mk0829/p/14309343.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号