利用JQuery的Hover解决FF下的mouseleave问题

工作心得，随笔记录，随时更新，欢迎指教

首先，问题的缘起，onmouseleave和onmouseout区别，onmouseleave会把div和div内部的元素当成一个整体，而onmouseout则不会，我们先看一个简单的例子

<div id="parentDiv">
    <div id="childDiv">
    </div>
</div>

在parentDiv上声明onMouseOut事件来实现某个处理时，会有一个很头疼的问题，就是当用户mouseover到ChildDiv时，同样也会触发parent的mouseout事件，在很多情况下，我们并不希望系统这样做，例如parentDiv是个弹出的menu div，当用户mouseOut出弹出框时希望能让弹出框隐藏掉，但是当你鼠标滑到弹出框中的某个DIV或者其他元素也让弹出框隐藏掉了

其次，mouseleave会把parentDiv和它的所有child当做一个统一的元素处理，也就是说你在parent里怎么划拉，也不会触发mouseleave.

但是，mouseleave是不能够被FireFox所支持的

最后，jquery的hover方法解决了这个问题，引一下文档中的hover介绍

引用

Simulates hovering (moving the mouse on, and off, an object). This is a custom method which provides an 'in' to a frequent task.
Whenever the mouse cursor is moved over a matched element, the first specified function is fired. Whenever the mouse moves off of the element, the second specified function fires. Additionally, checks are in place to see if the mouse is still within the specified element itself (for example, an image inside of a div), and if it is, it will continue to 'hover', and not move out (a common error in using a mouseout event handler).

调用方法如下

$("#parentDiv").hover(function(){},function (){$("#parentDiv").hide()});