Hover events for multiple elements in jquery

• 1. Requirements Introduction
• 2. Example Studies
• 3. Solution

1. Requirements Introduction

The hover event for jquery is only for a single HTML element, for example:

$ (' #login '). Hover (fun2, fun2);

The FUN1 function is called when the mouse enters the #login element, and the FUN2 function is called when it leaves, and the API has been able to satisfy most of the requirements.

However, there are times when we want to trigger fun1 when the mouse enters the "combined area" of two or more elements, triggering fun2 when leaving them, and moving the mouse between these elements does not trigger any events. For example, two elements next to each other are HTML elements, such as:

FUN1 is triggered when the mouse enters the "combo" field of both, and fun2 is triggered when it leaves. You might think of using the following method

$ (' #trigger, #drop '), hover (fun1, fun2);

This approach does not meet our needs because fun2 and fun1 are triggered in turn when entering #drop from #trigger. To solve this problem, a simpler way is to change the HTML structure, implemented as follows:

<id= "container">    <id= " Trigger "></div>    <ID = "Drop" ></ Div > </ Div >

$ (' #container '). Hover (fun1, fun2);

This enables this functionality by binding the hover event on the parent element.

2. Example Studies

To simplify the diagram for a common drop-down menu, the HTML structure is as follows:

$ (' #droplist '). Hover (function () {    $ (this). Find (' ul '). "Show ();}, function () {    $ (this). Find (' ul '). Hide ();});

The implementation of the Javascrip program is also very simple

$ (' #droplist '). Hover (function() {    $ (this). Find (' ul'function () {    $ (this). Find (' ul '). Hide ();}); 

This implementation is logically clear, but leads to too many levels of HTML nesting, and there is a lot of inconvenience in writing CSS. For example:

{ font-size:14px;  }

We want this CSS to set a 14-pixel font for the first-level LI element, but it's also used for the second-level element, so it has to be rewritten using the following statement.

{ font-size:12px;}

3. Solution

Change the HTML structure

<ulID= "#nav">    <Li></Li>    <Li></Li>    <LiID= "Trigger">Drop-down menu</Li>    <Li></Li></ul><ulID= "Drop">    <Li>Drop-down Item 1</Li>    <Li>Drop-down Item 2</Li>    <Li>Drop-down Item 3</Li><ul>

Introduce JS file in turn

<script type= "Text/javascript" src= "js/jquery.js" ></script><script type= "Text/javascript" src= "js/ Jquery.mixhover.js "></script>

Control code

$.mixhover (    ' #trigger ',     ' #drop ',     function(TRG, drop) {        # (drop). Show ();    },    function(TRG, drop) {        # (drop). Hide ();    })

This way, when the mouse enters #trigger, the #drop is displayed, and the mouse moves from #trigger to #drop without triggering any events, in effect, #trigger and #drop elements are treated as an element.

The Jquery.mixhover.js program is as follows

/** * author:http://rainman.cnblogs.com/* date:2014-06-06 * depend:jquery*/$.mixhover=function() {    //Finishing Parameters $.mixhover ($e 1, $e 2, Handlein, handleout)    varparms; varLength =arguments.length; varHandlein = Arguments[length-2]; varHandleout = arguments[length-1]; if($.isfunction (Handlein) &&$.isfunction (handleout)) {parms= Array.prototype.slice.call (arguments, 0, length-2); } Else if($.isfunction (handleout)) {parms= Array.prototype.slice.call (arguments, 0, length-1); Handlein= Arguments[length-1]; Handleout=NULL; } Else{parms=arguments; Handlein=NULL; Handleout=NULL; }    //sorting parameters so that the elements in turn corresponds    varElems = [];  for(vari = 0, len = parms.length; i < Len; i++) {Elems[i]= []; varp =Parms[i]; if(P.constructor = = =String) {P=$ (p); }        if(P.constructor = = = $ | | p.constructor = = =Array) {             for(varj = 0, size = p.length; J < size; J + +) {Elems[i].push (p[j]); }        } Else{Elems[i].push (P); }    }    //Binding Hover Events     for(vari = 0, len = elems[0].length; i < Len; i++) {        vararr = [];  for(varj = 0, size = elems.length; J < size; J + +) {Arr.push (elems[j][i]);    } $._mixhover (arr, Handlein, handleout); }};$._mixhover=function(Elems, Handlein, handleout) {varIsIn =false, timer; $ (elems). Hover (function() {window.cleartimeout (timer); if(IsIn = = =false) {Handlein&&handlein.apply (Elems, Elems); IsIn=true; }    },    function() {Timer= Window.settimeout (function() {handleout&&handleout.apply (Elems, Elems); IsIn=false; }, 10); });};