3種純css方法控制元素隱藏顯示

標籤：隱藏   idt   put   inpu   首頁   code   pos   :hover   空白   

1.通過hover，也是最常用的方式。此方法要求按鈕與被控制元素必須有層級關係。（相容低端瀏覽器常用）

    <div class="nav-btn">        <h2>按鈕</h2>        <ul class="nav-box">            <li><a href="#">菜單1</a></li>            <li><a href="#">菜單2</a></li>            <li><a href="#">菜單3</a></li>        </ul>    </div>

        *{            padding: 0;            margin: 0;        }        ul,li{            list-style: none;        }        .nav-btn{            position: relative;        }        .nav-btn h2{            height: 60px;            line-height: 60px;            width: 130px;            text-align:center;            background: #ff0;        }        .nav-box{            position: absolute;            top:60px;            left: 0px;            display: none;        }        .nav-btn:hover .nav-box{            display: block;        }

2.通過：focus點擊按鈕顯示，點擊空白處隱藏。此方通同樣需要按鈕與被控制元素之間存在層級關係。（需用到CSS3選取器）

    <div class="nav-btn">        <button>按鈕</button>        <ul class="nav-box">            <li><a href="#">菜單1</a></li>            <li><a href="#">菜單2</a></li>            <li><a href="#">菜單3</a></li>        </ul>    </div>

        *{            padding: 0;            margin: 0;        }        ul,li{            list-style: none;        }        .nav-btn{            position: relative;        }        .nav-btn h2{            height: 60px;            line-height: 60px;            width: 130px;            text-align:center;            background: #ff0;        }        .nav-box{            position: absolute;            top:60px;            left: 0px;            display: none;        }        .nav-btn button:focus ~ .nav-box{            display: block;        }

3.利用label的for屬性綁定checkbox，此方法對按鈕與盒子的層級關係沒有限制（需用到CSS3選取器）

    <label for="control" class="nav-btn">菜單</label>    <div>        <input type="checkbox" name="" id="control" class="nav-con">        <ul class="nav-box">            <li><a href="#">首頁</a></li>            <li><a href="#">聯絡我們</a></li>            <li><a href="#">產品</a></li>            <li><a href="#">新聞</a></li>        </ul>    </div>

        ul,li{            list-style: none;        }        *{            padding: 0;            margin: 0;        }        .nav-con{            display: none;        }        .nav-box{            display: none;        }        .nav-con:checked ~ .nav-box{           display: block;        }        .nav-btn{            padding: 10px 15px;            background:;        }

 

3種純css方法控制元素隱藏顯示