zoukankan      html  css  js  c++  java
  • jquery实现导航栏切换、下划线移入移出

    这里下划线显示使用的是伪类,用hover属性触发伪类,使其显示下划线

    代码如下:

     0;
    border-bottom: 2px solid blue;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -ms-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out; /* 动画 */

    hover触发伪类:

    .navContent>p:hover::before{    /* hover触发伪类 */
        30px;    /* 下划线最长长度 */
    }

    完整代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        </head>
        <body>
            <ul class="nav">
                <li class="navContent">
                    <p>水果</p>
                    <div>
                        <p>苹果</p>
                        <p>香蕉</p>
                    </div>
                </li>
                <li class="navContent">
                    <p>蔬菜</p>
                    <div>
                        <p>白菜</p>
                        <p>菠菜</p>
                    </div>
                </li>
                <li class="navContent">
                    <p>肉食</p>
                    <div>
                        <p>猪肉</p>
                        <p>鸡肉</p>
                    </div>
                </li>
            </ul>
        </body>
    </html>
    <script>
    $('.navContent').on('mouseenter',function(){
        $(this).siblings().find('div').css({'display':'none'});
    });
    $('.navContent>p').on('mouseenter',function(){
        $(this).siblings().slideDown();
        $(this).siblings().css({'display':'block'});
    });
    $('ul').on('mouseleave',function(){
        $('.navContent div').css({'display':'none'});    
    });
    $('.navContent div p').on('click',function(){   /* 添加点击事件 */
        console.log($(this).text());
    });
    </script>
    <style>
        ul,li{
            list-style-type: none;
        }
        .nav{
            display: flex;
            flex-direction: row;
        }
        .navContent{
             100px;
            margin-right: 30px;
            position: relative;
            text-align: center;
        }
        .navContent>p::before{    /* 伪类 css2用:     css3用:: */
            content: '';      /* 伪类元素需要加content属性 */
            position: absolute;
            bottom: 0;
             0;
            border-bottom: 2px solid blue;
            -webkit-transition: width 0.5s ease-in-out;
            -moz-transition: width 0.5s ease-in-out;
            -ms-transition: width 0.5s ease-in-out;
            -o-transition: width 0.5s ease-in-out;
            transition: width 0.5s ease-in-out;
        }
        .navContent>p:hover::before{    /* hover触发伪类 */
             30px;    /* 下划线最长长度 */
        }
        .navContent>div{
            position: absolute;      /* 定位一定要注意 */
            display: none;
            background-color: #F9F9F9;
            100px;
        }
        .navContent div p:hover{
            color: #3ec56c;
        }
    </style>

    如果遇到下拉菜单无法显示的问题,请首先检查外层div是否设置了

    overflow:hidden;

    我就是因为这个疑惑了很久,这里标注出来,希望大家不要想我一样踩这个纯属浪费时间的坑(我也很无奈啊)。

  • 相关阅读:
    ASE19团队项目 beta阶段 model组 scrum report list
    ASE19团队项目 beta阶段 model组 scrum7 记录
    ASE19团队项目 beta阶段 model组 scrum6 记录
    ASE19团队项目 beta阶段 model组 scrum5 记录
    ASE19团队项目 beta阶段 model组 scrum4 记录
    ASE19团队项目 beta阶段 model组 scrum3 记录
    ASE19团队项目 beta阶段 model组 scrum2 记录
    ASE19团队项目 beta阶段 model组 scrum1 记录
    【ASE模型组】Hint::neural 模型与case study
    【ASE高级软件工程】第二次结对作业
  • 原文地址:https://www.cnblogs.com/mfbzr/p/12912058.html
Copyright © 2011-2022 走看看