隐藏元素的两种方式 

<!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>

 

posted @ 2021-01-21 17:43  明坤  阅读(97)  评论(0)    收藏  举报