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 显示或隐藏子元素