Hover events of Multiple Elements in jQuery

1. Requirements

The hover event of jQuery only targets a single HTML element, for example:

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

When you move to the # login element, call the fun1 function. When you leave, call the fun2 function. This API can meet most of the requirements.

However, sometimes we want to trigger fun1 when the mouse moves into two or more elements and trigger fun2 when they leave, and moving the mouse between these elements does not trigger any events. For example:

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

This method does not meet our needs, because the entry from # trigger to # drop triggers fun2 and fun1. To solve this problem, a simple method is to change the HTML structure. The implementation method is as follows:

<div id="container">    <div id="trigger"></div>    <div id="drop"></div></div>$('#container').hover(fun1, fun2);

In this way, the hover event is bound to the parent element to implement this function.

2. Example Study

A simplified image is a common drop-down menu. The HTML structure is as follows:

<Ul id = "# nav"> <li> </li> <li id = "droplist"> <span> drop-down menu </span> <ul> <li> drop-down Item 1 </li> <li> drop-down Item 2 </li> <li> drop-down Item 3 </li> <ul> </li> <li> </ul>

The implementation of the JavaScrip program is also very simple

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

This implementation method is logically clear, but leads to too many HTML nested hierarchies, causing a lot of inconvenience when writing CSS. For example:

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

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

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

3. Solution

Change HTML Structure

<Ul id = "# nav"> <li> </li> <li id = "trigger"> drop-down menu </li> <li> </li> </ul> <ul id = "drop"> <li> drop-down Item 1 </li> <li> drop-down Item 2 </li> <li> drop-down item 3 </li> <ul>

Introduce JS files in sequence

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

In this way, when the mouse enters the # trigger, the # drop is displayed. When the mouse moves from the # trigger to the # drop, no event is triggered, in fact, the # trigger and # drop elements are processed as an element.

The jquery. mixhover. js program is as follows:

/*** Author: http://rainman.cnblogs.com/ * Date: 2014-06-06 * Depend: jQuery */$. mixhover = function () {// sort 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 ;} // sort the parameters so that elements correspond to var elems = [] in sequence; for (var I = 0, len = parms. length; I <len; 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 the Hover event for (var I = 0, len = elems [0]. length; I <len; I ++) {var arr = []; for (var j = 0, size = elems. length; j <size; 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 );});};