jQuery的悬停事件只针对单个HTML元素。然而，有时我们希望当鼠标进入两个或更多元素时触发fun1，当鼠标离开它们时触发fun2，但是在这些元素之间移动鼠标不会触发任何事件。

1.需求简介

jQuery的悬停事件只针对单个HTML元素，比如：复制代码如下：$(#login )。悬停(fun2，fun 2)；鼠标进入#login元素时调用fun1函数，离开时调用fun2函数。这个API已经能够满足大多数需求。

然而，有时我们希望当鼠标进入两个或更多元素时触发fun1，当鼠标离开它们时触发fun2，但是在这些元素之间移动鼠标不会触发任何事件。例如，一个HTML元素有两个相邻的元素，如下图所示：

当老鼠进入他们的区域时，它触发fun1，当它离开时，它触发fun2。你可能会想到用以下方法复制代码代码如下：$ (# trigger，# drop )、hover (fun1，fun 2)；这种方式不能满足我们的需求，因为从#trigger进入#drop会触发fun2和fun1。要解决这个问题，一个简单的办法就是改变HTML的结构，可以实现如下：复制代码如下：div id= container div id= trigger /div div id= drop /div/div

$(#container )。悬停(fun1，fun 2)；这是通过在父元素上绑定悬停事件来实现的。

2.示例研究

下图是一个常用下拉菜单的简化图，HTML结构如下：

复制代码如下：ul id= # nav Li/Li Li id= drop list span下拉菜单/span ul li下拉项1/li li下拉项2/li li下拉项3/Li ul/Li Li/Li/ul实现的JavaScrip程序也很简单。复制代码如下：$ (# droplist )。hover (function () {$ (this)。查找( UL )。show()；}，function(){ $(这个)。查找( ul )。hide()；});这种实现方式逻辑清晰，但是导致HTML的嵌套层次太多，写CSS的时候有很多不便。比如复制代码如下：# nav Li { font-size:14px；}我们希望这个CSS为一级li元素设置14像素的字体，但是它也作用于二级元素，所以我们要使用下面的语句重写并复制代码如下：# nav Li Li { font-size:12px；}

3.解决方案

更改HTML结构的复制代码如下：ul ID= # nav Li/Li Li/Li Li ID= trigger 下拉菜单/li li/li ul ID= drop li下拉项1/li li下拉项2/li li下拉项3/Li依次介绍JS文件复制代码如下：Script type= text/JavaScript src= JS/jquery . JS /Script Script type= text/JavaScript src= JS/JSmixhover (# trigger ， # drop ，function (trg，drop) {# (drop)。show()；}，函数(trg，drop){ #(drop)。hide()；})这样当鼠标输入#trigger时，就会显示#drop。当鼠标从#trigger移动到#drop时，不会触发任何事件。事实上，#trigger和#drop元素被视为一个元素。

jquery.mixhover.js程序复制代码如下：/* *作者：http://rainman.cnblogs.com/*日期：2014-06-06 *依赖：jquery */$。mix hover=function(){//结束参数$。mixhover ($ e1，$ e2，handle in，handle var length=arguments . length；var handle in=arguments[length-2]；var handle out=arguments[length-1]；如果($。isFunction(handleIn) $。is function(handle out)){ parms=array . prototype . slice . call(arguments，0，length-2)；} else if ($。is function(handle out)){ parms=array . prototype . slice . call(arguments，0，length-1)；handle in=arguments[length-1]；handleOut=null} else { parms=参数；handleIn=nullhandleOut=null}

//对参数进行排序，使元素依次对应var elements=[]；for (var i=0，len=parms.length我lenI){ elems[I]=[]；var p=parms[I]；if(p . constructor===String){ p=$(p)；} if(p . constructor===$ | | p . constructor===Array){ for(var j=0，size=p.lengthj尺寸；j ) { elems[i]。push(p[j])；} } else { elems[i]。推(p)；} }

//绑定盘旋事件for (var i=0，len=elems[0]).长度；我lenI){ var arr=[]；for (var j=0，size=elems.lengthj尺寸；j){ arr。push(elems[j][I])；} $._mixhover(arr，handleIn，handle out)；} };$._mixhover=function(elems，handleIn，handleOut) { var isIn=false，timer$(元素)。hover(function(){ window。清除超时(定时器))；if(isIn===false){ handle in handle in。apply(elems，elems)；isIn=true} }，function(){ timer=window。settimeout(function(){ handle out handle out。apply(elems，elems)；isIn=false}，10)；});};