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)；});};

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。