仿新浪下拉菜单

Posted 2021-03-09 liusining

• 要求
  仿新浪网，鼠标移入显示下拉菜单，鼠标移出隐藏下拉菜单，具体表现如下图：
  

• 代码

    <ul>
        <li id="top">微博</li>
        <li class="hide">私信</li>
        <li class="hide">评论</li>
        <li class="hide">@我</li>
    </ul> 
    <script>
        var top = document.getElementById('top');
        var hide = document.getElementsByClassName('hide');//返回的是一个元素集合
        var ul = document.querySelector('ul');
        // console.log('123');
        ul.onmouseover = function() {
        //使用top.onmouseover时会在鼠标一离开zd元素时，下拉菜单立即隐藏，应该效果一样才对啊？
           hide[0].style.display = 'block';
           hide[1].style.display = 'block';
           hide[2].style.display = 'block';   
        }
        ul.onmouseout = function () {
            hide[0].style.display = 'none';
            hide[1].style.display = 'none';
            hide[2].style.display = 'none';  
        }
    </script>

• 问题
  如注释处