jQuery事件--mouseover()、mouseout()、mouseenter()和mouseleave()

mouseover([[data],fn])

概述

当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用

注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件

参数

fn 在每一个匹配元素的mouseover事件中绑定的处理函数

[data],fn data:mouseover([Data], fn) 可传入data供函数fn处理；fn:在每一个匹配元素的mouseover事件中绑定的处理函数

mouseout([[data],fn])

概述

当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。

注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件

参数

fn 在每一个匹配元素的mouseout事件中绑定的处理函数

[data],fn data:mouseout([Data], fn) 可传入data供函数fn处理；fn:在每一个匹配元素的mouseout事件中绑定的处理函数

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <title></title>
        <script type="text/javascript">
            x = 0;
            y = 0;
            $(document).ready(function() {
                $("#over").mouseout(function() {
                    $("#over span").text(x += 1);
                });
                $("#out").mouseover(function() {
                    $("#out span").text(y += 1);
                });
            });
        </script>
    </head>

    <body>        
        <div id="over" style="background-color:lightgray;padding:20px;300px;float:left;position: relative;top: 10px;left: 10px;">
            <h2 style="background-color:white;">触发Mouseover 事件：<span></span></h2>
        </div>
        <br />
        <div id="out" style="background-color:lightgray;padding:20px;300px;float:left;position: relative;left: -330px;top: 150px;">
            <h2 style="background-color:white;">触发 Mouseout 事件：<span></span></h2>
        </div>
    </body>

</html>

mouseenter([[data],fn])

概述

当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。

与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

参数

fn 在每一个匹配元素的mouseenter事件中绑定的处理函数。

[data],fn data:mouseenter([Data], fn) 可传入data供函数fn处理；fn:在每一个匹配元素的mouseenter事件中绑定的处理函数

mouseleave([[data],fn])

概述

当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。

与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

参数

fn 在每一个匹配元素的mouseleave事件中绑定的处理函数。

[data],fn data:mouseleave([Data], fn) 可传入data供函数fn处理；fn:在每一个匹配元素的mouseleave事件中绑定的处理函数

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
        <title></title>
        <script type="text/javascript">
            x = 0;
            y = 0;
            $(document).ready(function() {
                $("#over").mouseenter(function() {
                    $("#over span").text(x += 1);
                });
                $("#out").mouseleave(function() {
                    $("#out span").text(y += 1);
                });
            });
        </script>
    </head>

    <body>        
        <div id="over" style="background-color:lightgray;padding:20px;300px;float:left;position: relative;top: 10px;left: 10px;">
            <h2 style="background-color:white;">触发Mouseenter 事件：<span></span></h2>
        </div>
        <br />
        <div id="out" style="background-color:lightgray;padding:20px;300px;float:left;position: relative;left: -330px;top: 150px;">
            <h2 style="background-color:white;">触发 Mouseleave 事件：<span></span></h2>
        </div>
    </body>

</html>