Mouseout 和 MouseOver 事件有子元素的情况

大家都熟悉mouseout 和 mouseover事件，就是鼠标移出和鼠标掠过事件，但是还是有部分人不知道在有子元素的情况下，同时还会鼠标的移出和掠过子元素的时候都会在中再一次触发。可以看个例子：

?

?

这个例子原意是想打开一个列表框然后选择一个选项。鼠标移开列表框的时候关闭，但是事实情况是鼠标只要移上列表框就关闭。原因就是，列表绑定了一个mouseout事件，因为该列表有很多子元素，所以同意会触发ul，li，的鼠标掠过事件，也就是说，当鼠标移出ul，li的时候同样会触发mouseout事件。

解决的方法有多种，本文就是用jquery对应的两个事件，mouseenter 和 mouseleave，

只要把mouseout事件名改成mouseleave，就大功告成了。嘿嘿，简单！jquery都想到了。^_^,

Mouseleave ：与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。例子

MouseEnter ：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。请看下面例子的演示。例子