javascript - 小米官网顶部导航问题如何用JQ做？

Question

最近在仿小米官网鼠标划过导航会出现下面的图片。如何实现的？我用了hide和show，移走的瞬间就消失了导致根本没法移到图片上.请问这么解决这个问题？

Answer 1

// nav mouseover 

setTimeOut(function (){
    // animate height 0px -> 100px
    
},300);

移入移出设置300ms延迟就可以了，不过注意按照情况清除定时器。

Answer 2

见到过一种做法，将二级菜单放置到一级菜单内部。
li上触发hover事件显示二级菜单,因为二级菜单还是在li内部，所以你移动的过程中二级菜单不会消失。

<li>
    <label>一级菜单</label>
    <p class="hide">
        <ul>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </p>
</li>

Answer 3

用css动画，限定时间，控制高度，焦点时让选中元素从0改为300做一个变化时间，移走时从300变成0，给显示的元素加一个状态，获取焦点显示。

Answer 4

mouseout和mouseleave的区别