Detailed explanation of the Hover event sample code for multiple elements in jQuery

• 1. RequirementsIntroduction

• 2. Example study

• 3.Solution Solution

1. Introduction to requirements

jQuery's hover event 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 the mouse leaves. This API can meet most needs.

However, sometimes we want fun1 to be triggered when the mouse enters the "combined area" of two or more elements, and fun2 to be triggered when leaving 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 "combination area" of the two, and fun2 is triggered when the mouse leaves. You may think that using the following method

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

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

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

$(&#39;#container&#39;).hover(fun1, fun2);

This function is achieved by binding the hover event on the parent element.

2. Example study

The picture below is a common drop-down menu simplified diagram, the 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>

The implemented JavaScript program is also very simple

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

This implementation method has clear logic, but it leads to too many nested levels of HTML and 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-layer li element, but it also affects the second-layer element, so we have to rewrite it using the following statement

#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>

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

So that when the mouse enters #trigger, it will #drop is displayed, and no event will be triggered when the mouse moves from #trigger to #drop. In fact, the #trigger and #drop elements are treated as one element.

jquery.mixhover.js program is 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);
    });
};

The above is the detailed content of Detailed explanation of the Hover event sample code for multiple elements in jQuery. For more information, please follow other related articles on the PHP Chinese website!