CSS實現控制元素的顯示和隱藏

本文轉載自查看原文 2020-03-27 12:19 2894

1 使用label + input實現元素的隱藏和顯示

以下代碼點擊‘菜單’可以實現li列表的顯示和隱藏：

        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            input, ul{
                display: none;
            }
            input:checked ~ ul {
                display: block;
            }
        </style> 
        <body>
        　　<label for="menu">菜單</label>
            <div>
                <input id="menu" type="checkbox"/>
                <ul>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                </ul>
            </div>
        </body>

~選擇器：

element1~element2 選擇器 element1 之后出現的所有 element2。兩種元素必須擁有相同的父元素，但是 element2 不必直接緊隨 element1。

2 hover實現鼠標懸浮時顯示其他元素，離開時隱藏這個元素

以下代碼實現鼠標放到‘菜單’時顯示li列表，離開時隱藏li列表：

        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            input, ul{
                display: none;
            }
            #btn:hover ~ ul {
                display: block;
            }
        </style> 
        <body>
        　　<spanid="btn">菜單</span>
            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </body>

3 button + focus點擊指定按鈕時顯示，點擊其他地方時隱藏

以下代碼實現點擊‘菜單’時顯示li列表，點擊除‘菜單’以外的地方隱藏li列表：

       <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            input, ul{
                display: none;
            }
            #btn:focus ~ ul {
                display: block;
            }
        </style> 
        <body>
        　　<button id="btn">菜單</button>
            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </body>

原文：http://dongtianee.sinaapp.com/demo8.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css控制元素顯示和隱藏 css鼠標懸浮控制元素隱藏與顯示 3種純css方法控制元素隱藏顯示用CSS實現hover控制顯示隱藏 CSS元素的顯示和隱藏 CSS 元素的顯示與隱藏 jquery與css控制元素的隱藏和顯示的幾種方法 js控制元素隱藏和顯示 JS控制元素的顯示和隱藏 CSS 顯示或隱藏子元素