实例

当鼠标从元素上移开时，改变元素的背景色：

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

亲自试一试

定义和用法

当鼠标指针从元素上移开时，发生 mouseout 事件。

该事件大多数时候会与 mouseover 事件一起使用。

mouseout() 方法触发 mouseout 事件，或规定当发生 mouseout 事件时运行的函数。

注释：

mouseout与 mouseleave 事件不同，mouseout不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

直接举出 实例讲解：

<ul id="out">

<li>111</li><li>222</li><li>333</li>

</ul>

上面这个结构，希望在在ul上绑定mouseout事件，移开ul时触发事件

但是实际情况是当鼠标移动到它的子元素li上面时，也会触发mouseout事件，移动到子元素时由于事件冒泡，移动到子元素的过程被认为是先移出了ul，再进入li；

只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。请看下面例子的演示。

所以要用 mouseleave  

mouseleave事件和mouseover的不同之处是事件的冒泡的方式。如果mouseover在这个例子中使用了，然后当鼠标指针在Inner元素上移出，该处理程序将被触发。这通常是不受欢迎的行为。另一方面, mouseleave 事件只会在绑定它的元素上被调用，而不会在后代节点上被触发。因此，在这个例子中，当鼠标离开Outer元素，而不是Inner元素时，处理器才会被触发。

不管是 mouseout 和 mouseleave 里面 如果 还用了 hover  有子元素为 inline-block时,它们都有问题,所以里面子元素还是不能用inline-block吧,

对应的 mouseleaver 应该用 mouseenter或mouseover吧

最好用mouseenter

hover！= mouseover+mouseout。

但hover=mouseenter + mouseleave

亲自试一试：mouseleave 与 mouseout 的不同

触发 mouseout 事件

语法

$(selector).mouseout()

亲自试一试

将函数绑定到 mouseout 事件

语法

$(selector).mouseout(function)

亲自试一试

实例

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

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

亲自试一试

定义和用法

当鼠标指针离开元素时，会发生 mouseleave 事件。

该事件大多数时候会与 mouseenter 事件一起使用。

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数。

注释：与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。请看下面例子的演示。

亲自试一试：mouseleave 与 mouseout 的不同

触发 mouseleave 事件

语法

$(selector).mouseleave()

亲自试一试

将函数绑定到 mouseleave 事件

语法

$(selector).mouseleave(function)

亲自试一试