小菜学习日记—关于下拉导航菜单闪烁（hover、mouseover 与 mouseenter的区别）

小菜学习日记—关于下拉导航菜单闪烁（hover、mouseover 与 mouseenter的区别）

今天敲导航菜单的时候本来一直用hover控制下拉二级菜单，今天脑抽用了mouseover+mouseout，然后问题就来了：下拉二级菜单闪烁。小菜我可是琢磨了半天，终于有了个结果与大家分享下。主要是一下几点：

用mouseover+mouseout控制闪烁的原因

mouseover与mouseenter的区别

hover与二者的关系

解决闪烁问题的方法

用mouseover+mouseout控制闪烁的原因

<div class="menu">
<ul>
<li class="menu_total"><a href="#">全部商品分类</a></li>
<li><a href="#">生鲜食品</a></li>
<li><a href="#">酒水</a></li>
<li><a href="#">休闲食品</a></li>
<li><a href="#">饮料冲调</a></li>
<li><a href="#">粮油调味</a></li>
<li><a href="#">日用百货</a></li>
<li><a href="#">进口商品</a></li>
<li><a href="#">手机配件</a></li>
</ul>
</div>

小菜做了一个这样的下拉菜单，因为布局的原因。第一个li就相当于一级菜单了，其他li算是二级菜单。问题是这样：当鼠标滑动到一级菜单时按照设想二级菜单下拉显示，这时候鼠标下滑至二级菜单之后鼠标滑动菜单开始闪烁。

原因：mouseover在元素内存在子元素时，鼠标滑动到子元素时会出现问题。mouseover是鼠标经过对象时，不包含他的子类同时被选中。mouseover在子元素之间滑动时就会出现闪烁现象。

mouseover与mouseenter的区别

关于这两者的区别请大家直接戳演示demo

mouseover与 mouseenter的区别就是在子元素上。前者选中不包含子元素，后者涵盖子元素。

mouseover事件与mouseenter事件的区别

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave

hover与二者的关系

hover！= mouseover+mouseout。

hover=mouseenter + mouseleave。

解决闪烁问题的方法

总结一下解决闪烁问题的方法：

最直接的方法：

用hover 或者mouseenter + mouseleave。不用mouseover+mouseout。

通用一些方法：

小菜在一开始解决这个闪烁问题的时候想过用setTimeout延时。延时方法通用一些，无论是此处下拉菜单闪烁还是其他地方的闪烁问题setTimeout延时能很好的解决问题。setTimeout