zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Spring spEL
    Spring 使用外部部署文件
    Spring 自动装配
    spring 属性配置细节
    hdu 1054 Strategic Game
    fzu 2037 Maximum Value Problem
    将博客搬至CSDN
    HDU 4714 Tree2Cycle
    HDU 1009 The Shortest Path in Nya Graph
    POJ 1942 Paths on a Grid 组合数的优化
  • 原文地址:https://www.cnblogs.com/fengfuwanliu/p/10059056.html
Copyright © 2011-2022 走看看