Hover event solution for multiple elements in jQuery_jquery

1. Introduction to requirements

jQuery’s hover event is only for a single HTML element, for example:

Copy code The code is as follows:

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

The fun1 function is called when the mouse enters the #login element , the fun2 function is called when leaving. This API can meet most needs.

However, sometimes we want fun1 to be triggered when the mouse enters two or more elements, and fun2 to be triggered when the mouse leaves them, while moving the mouse between these elements does not trigger any events. For example, two HTML elements are next to each other, as shown below:



Fun1 is triggered when the mouse enters the area between the two, and fun2 is triggered when the mouse leaves. You may think of using the following method

Copy code The code is as follows:

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

This method does not meet our needs, because fun2 and fun1 will be triggered when entering #drop from #trigger. To solve this problem, a relatively simple way is to change the HTML structure. The implementation is as follows:

Copy code The code is as follows:

< ;/div>

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

This way by binding on the parent element hover event to achieve this function.

2. Example study

The picture below is a simplified diagram of a common drop-down menu. The HTML structure is as follows:

Copy code The code is as follows:

ul id="#nav">

< ;/li>

Drop-down menu

• Dropdown item 1


• Dropdown item 2


• Dropdown item 3

The implemented JavaScript program is also very simple

Copy code The code is as follows:

$('#droplist').hover(function(){
$( this).find('ul').show();
}, function(){
$(this).find('ul').hide();
});

This implementation method has clear logic, but it results in too many nested levels of HTML and a lot of inconvenience when writing CSS. For example:

Copy code The code is as follows:

#nav li { font-size:14px; }

We want this CSS to set a 14-pixel font for the first-layer li element, but it also affects the second-layer element, so we have to use the following statement to rewrite it

Copy code The code is as follows:

#nav li li { font-size:12px; }

3. Solution

Change HTML structure

Copy code The code is as follows:

• 
  
• 
  
• Drop-down menu


• 
  

• Dropdown item 1


• Dropdown item 2


• Dropdown item 3

Introduce JS files in sequence

Copy the code The code is as follows:

Control code

Copy code The code is as follows:

$.mixhover(
'#trigger',
'#drop',
function(trg, drop){
#(drop).show();
},
function(trg, drop){
#(drop).hide();
}
)

In this way, #drop will be displayed when the mouse enters #trigger. When the mouse moves from #trigger to #drop, no event will be triggered. In fact, the #trigger and #drop elements are treated as one element.

jquery.mixhover.js program is as follows

Copy code The code is as follows:

/**
* Author: http://rainman.cnblogs.com/
* Date: 2014-06-06
* Depend: jQuery
*/
$.mixhover = function() {
// Organize parameters $.mixhover($e1, $e2, handleIn, handleOut)
var parms;
var length = arguments.length;
var handleIn = arguments[length - 2];
var handleOut = 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;
}

// Arrange parameters so that elements correspond in turn to
var elems = [];
for (var i = 0, len = parms.length ; i elems[i] = [];
var p = parms[i];
if (p.constructor === String) {
p = $(p);
}
if (p.constructor === $ || p.constructor === Array) {
for (var j = 0, size = p.length; j < ; size; j ) {
elems[i].push(p[j]);
}
} else {
elems[i].push(p);
}
}

// Bind Hover event
for (var i = 0, len = elems[0].length; i var arr = [] ;
for (var j = 0, size = elems.length; j arr.push(elems[j][i]);
}
$. _mixhover(arr, handleIn, handleOut);
}
};
$._mixhover = function(elems, handleIn, handleOut) {
var isIn = 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);
});
};