案例：新浪下拉菜单

/* 案例分析
1.导航栏里面li都要有鼠标经过 所以循环注册鼠标事件
2.核心原理 当鼠标经过li里面的第二个孩子ul显示 当鼠标离开 ul隐藏 */

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav ul {
            /* display: none; */
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #fecc5b;
            border-right: 1px solid #fecc5b;

        }
        .nav li {
            padding: 0 20px;
            float: left;
            background-color: springgreen;
        }
    </style>
</head>
<body>
    <ul class="nav">
    <li>
        <a href="#" class="a">微博</a>

        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>

    <li>
        <a href="#" class="a">微博</a>

        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
    
</ul>
<script>
    /* 案例分析
    1.导航栏里面li都要有鼠标经过 所以循环注册鼠标事件
    2.核心原理 当鼠标经过li里面的第二个孩子ul显示 当鼠标离开 ul隐藏 */

    var nav = document.querySelector('.nav');
    var lis = nav.children;//得到所有的li
    for(var i = 0 ;i<lis.length ;i++){
        lis[i].onmouseover = function() {
            this.children[1].style.display = 'block';
        }
        lis[i].onmouseout = function() {
            this.children[1].style.display = 'none';
        }

    }
</script>

</body>
</html>

 

posted @ 2020-06-02 14:54  qiuqiu95  阅读(400)  评论(0)    收藏  举报