jQuery several elements in Hover event

1. Introduction Demand

jQuery's hover events just for a single HTML element, such as:

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

Called when the mouse enters the #login elements fun1 function, the function call fun2 leave, this API has been able to meet most needs.

However, sometimes we hope that when the mouse enters two or more elements fun1 triggered when "a combination of area", triggering fun2 when they leave, and in between these elements moving the mouse does not trigger any event. For example, two elements next HTML element as shown below:

Fun1 triggered when the mouse enters both the "combination zone" field, triggering fun2 leave. You might think of using the following way

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

This approach does not meet our needs, as it will in turn trigger fun2 and fun1 when #trigger #drop from entering. To solve this problem, a relatively simple way is to change the HTML structure, to achieve the following manner:

<div id="container">
    <div id="trigger"></div>
    <div id="drop"></div>
</div>

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

This accomplishes this by binding the hover event on the parent element.

2. Examples of research

The following figure shows a simplified diagram of a common pull-down menu, HTML structure is as follows:

<ul id="nav">
    <li></li>
    <li></li>
    <li id="droplist">
        <span>下拉菜单</span>
        <ul>
            <li>下拉项1</li>
            <li>下拉项2</li>
            <li>下拉项3</li>
        <ul>
    </li>
    <li></li>
</ul>

JavaScrip program implementation is very simple

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

This implementation logic is clear, but lead to excessive levels of nested HTML, there have been a lot of inconvenience when writing CSS. E.g:

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

We hope that the first layer li element 14 pixel font set this as CSS, but it also acts on the second layer of the element, so had to use the following statement to rewrite over

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

3. Solution

Change the HTML structure

<ul id="#nav">
    <li></li>
    <li></li>
    <li id="trigger">下拉菜单</li>
    <li></li>
</ul>
<ul id="drop">
    <li>下拉项1</li>
    <li>下拉项2</li>
    <li>下拉项3</li>
<ul>

Followed by the introduction of the JS file

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

So that when the mouse enters #trigger will #drop show up, does not trigger when the mouse is moved from #trigger as #drop any event, in fact, speak #trigger and #drop elements as an element to handle.

jquery.mixhover.js procedures are as follows

/**
 * Author: http://rainman.cnblogs.com/
 * Date: 2014-06-06
 * Depend: jQuery
 */
$.mixhover = function() {
    // 整理参数 $.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;
    }

    // 整理参数 使得elements依次对应
    var elems = [];
    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);
        }
    }

    // 绑定Hover事件
    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);
    });
};

Example 4

HTML：
<ul id="nav">
    <li>菜单1</li>
    <li>菜单2</li>
    <li>菜单3</li>
</ul>
<div id="drop">
    <ul><li>菜单1-下拉项</li></ul>
    <ul><li>菜单2-下拉项</li></ul>
    <ul><li>菜单3-下拉项</li></ul>
<div>

CSS：
#drop ul { display:none; }

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

When placed into each mouse Li element, the corresponding elements will be displayed Ul

Reproduced in: https: //www.cnblogs.com/rainman/p/3772623.html