mouseenter 和 mouseleave

做一个下拉菜单的时候，HTML结构如下：

　　　　　　　　　　<ul>
                    <li class="red">
                        <a href="">第一级</a>
                    </li>
                    <li class="red">
                        <a href="">第一级</a>
                    </li>
                    <li class="red">
                        <a href="">第一级</a>
                        <div class="white">
                            <a href="">第二级</a>
                        </div>
                        <div class="white">
                            <a href="">第二级</a>
                        </div>
                    </li>
　　　　　　　　　　</ul>

如果对 .red a 绑定mouseover事件，而对整个li（包含第一级和第二级菜单）绑定mouseout事件的话，

li的子元素，也就是任何一个div，甚至任何一个a，都会被绑定mouseout，从而没法使得菜单在正确的时候收起（离开整个li的时候）。

用javascript直接判断对逻辑要求比较高，甚至可以说是我的噩梦。

其实jquery有两个方法可以简单快速的解决这个问题，这两个方法还可以连缀使用：

$(".white a").mouseenter(function(){
 　　相当于mouseover的部分
}).mouseleave(function(){
 　　相当于mouseout的部分
});

然后如果还有相应的点击事件，和mouseout一样，需要判断并排除与click事件的冲突，避免无法呈现选中状态。

 

mouseenter([[data],fn])

概述

当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。

与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

参数

fnFunctionV1.0

在每一个匹配元素的mouseenter事件中绑定的处理函数。

[data],fnString,FunctionV1.4.3

data:mouseenter([Data], fn) 可传入data供函数fn处理。

fn:在每一个匹配元素的mouseenter事件中绑定的处理函数。

示例

描述:

当鼠标指针进入（穿过）元素时，改变元素的背景色：

jQuery 代码:

$("p").mouseenter(function(){
  $("p").css("background-color","yellow");
});

mouseleave([[data],fn])

概述

当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。

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

参数

fnFunctionV1.0

在每一个匹配元素的mouseleave事件中绑定的处理函数。

[data],fnString,FunctionV1.4.3

data:mouseleave([Data], fn) 可传入data供函数fn处理。

fn:在每一个匹配元素的mouseleave事件中绑定的处理函数。

示例

描述:

当鼠标指针离开元素时，改变元素的背景色：：

jQuery 代码:

$("p").mouseleave(function(){
  $("p").css("background-color","#E9E9E4");
});