jQuery中多元素悬停事件解决方案

1.jQuery的悬停事件仅针对单个HTML元素，例如，复制代码如下： $ ('# login ')。悬停(fun2，fun 2)；鼠标进入#login元素时调用fun1函数，离开时调用fun2函数。这个API可以满足大多数需求。然而，有时我们想在鼠标进入两个或更多元素时触发fun1，在鼠标离开它们时触发fun2。在这些元素之间移动鼠标不会触发任何事件。例如，两个元素相邻的HTML元素，如下所示：。

当鼠标进入两者的区域时触发fun1，当鼠标离开时触发fun2。你可能会想到用以下方式复制代码： $ ('# trigger，# drop ')，悬停(fun 1，fun 2)；这个方法不符合我们的需求，因为fun2和fun1在进入# drop from #触发器时会被触发。要解决这个问题，一个简单的方法就是改变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/Li Li id='下拉列表' span下拉菜单/span ul li下拉项1/李莉下拉项2/李莉下拉项3/li ul /li li/li /ul实现的脚本语言程序也是非常简单复制代码代码如下：美元(' #droplist ').悬停(function(){ $(this)).查找(' ul ').show()；}，function(){ $(this).查找(' ul ').hide()；});这种实现方式逻辑清晰，但导致超文本标记语言嵌套层级过多，书写半铸钢钢性铸铁(铸造半钢)时出现了许多不便。例如：复制代码代码如下： # nav Li { font-size :14 px；} 我们希望这段半铸钢钢性铸铁(铸造半钢)为第一层里元素设置14像素字体，但是其也作用于了第二层元素，所以不得不使用下面的语句改写过来复制代码代码如下： # nav Li Li { font-size :12 px；} 3.解决方案更改超文本标记语言结构复制代码代码如下： ul id=' # nav ' Li/Li Li/Li Li id=' trigger '下拉菜单/li li/li /ul ul id='drop' li下拉项1/李莉下拉项2/李莉下拉项3/li ul依次引入射流研究…文件复制代码代码如下：脚本类型=' text/JAVAScript ' src=' http : js/jquery。js /脚本脚本类型=' text/JAVAScript ' src=' http : js/jquery。mixhover。js /脚本控制代码复制代码代码如下： $.mixhover('#trigger '，' #drop '，函数(trg，drop){ #(drop).show()；},函数(trg，drop){ #(drop).hide()；} ) 这样当鼠标进入#触发器时将#放下显示出来，鼠标从#触发器移如#放下时不会触发任何事件，实际上就是讲#触发器和#放下元素当做一个元素来处理jquery.mixhover.js。程序如下复制代码代码如下： /** *作者： http://rainman.cnblogs.com/*日期： 2014-06-06 *取决于： jQuery */$ .mixhover=function() { //整理参数$.mixhover($e1，$e2，handleIn，handleOut)var parms；可变长度=自变量。lengthvar handleIn=参数[长度-2]；var handleOut=参数[长度-1]；if ($ .is函数(handlen)$ .is FuncTion(handleOut)){ parms=array。原型。切片。呼叫(参数，0，长度-2)；} else if ($ .is FuncTion(handleOut)){ parms=array。原型。切片。呼叫(参数，0，长度-1)；handleIn=参数[长度-1]；handleOut=null} else { parms=参数；handleIn=nullhandleOut=null} //整理参数使得元素依次对应var elems=[]；for (var i=0，len=parms.length我透镜；I){ elems[I]=[]；var p=参数[一]；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].push(p)；} } //绑定盘旋事件for (var i=0，len=elems[0]).长度；我透镜；I){ var arr=[]；for (var j=0，size=elems.lengthj尺寸；j){ arr。push(elems[j][I])；} $._mixhover(arr，handleIn，handlout)；} };$._mixhover=function(elems，handleIn，handelout){ var IsIn=false，timer$(elems).悬停(function(){ window。cleartime out(计时器))；if(IsIn===false){ handlen handlen。应用(elems，elems)；isIn=真；} }，function(){ timer=window。settimeout(函数(){ handleOut handleOut。应用(elems，elems)；isIn=false}，10)；});};