zoukankan      html  css  js  c++  java
  • 3种纯css方法控制元素隐藏显示

    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:;
            }
  • 相关阅读:
    1.ok6410移植bootloader,移植u-boot,学习u-boot命令
    ok6410按键中断编程,linux按键裸机
    四. jenkins部署springboot项目(1)--window环境
    一.jenkins安装(windows环境)
    oracle服务端导出/导入方式expdp/impdp
    linux 日志文件查看
    linux kafka进程挂了 自动重启
    kafka manager遇到的一些问题
    if条件语句
    shell脚本的条件测试与比较
  • 原文地址:https://www.cnblogs.com/pomelott/p/7435677.html
Copyright © 2011-2022 走看看