最近在仿小米官网鼠标划过导航会出现下面的图片。如何实现的?我用了hide和show,移走的瞬间就消失了导致根本没法移到图片上.请问这么解决这个问题?
用css动画,限定时间,控制高度,焦点时让选中元素从0改为300做一个变化时间,移走时从300变成0,给显示的元素加一个状态,获取焦点显示。
mouseout和mouseleave的区别
// nav mouseover
setTimeOut(function (){
// animate height 0px -> 100px
},300);
移入移出设置300ms延迟就可以了,不过注意按照情况清除定时器。
见到过一种做法,将二级菜单放置到一级菜单内部。
li上触发hover事件显示二级菜单,因为二级菜单还是在li内部,所以你移动的过程中二级菜单不会消失。
<li>
<label>一级菜单</label>
<div class="hide">
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</div>
</li>