jquery中mouseenter，mouseleave与hover的区别用法

hover：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <script type="text/javascript" src="../js/jquery-1.9.0.min.js" ></script>
            <script>
            $(document).ready(function(){
                $(".div1").hover(function(){
                    alert("您的鼠标悬停在此div上！");
                },
                function(){
                    alert("您的鼠标已离开此div！");
                }
                );
            })
            </script>
        <title>jqueryhover</title>
    </head>
    <body>
        <div class="div1" style="width: 200px;height: 200px;background-color: red;">
        </div>
    </body>
</html>

hover前一个函数为悬停触发函数，后一个函数为鼠标离开所触发的函数；

mouseenter,mouseleave:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <script type="text/javascript" src="../js/jquery-1.9.0.min.js" ></script>
            <script>
                $(document).ready(function(){
                    $("div").addClass("div1");
                    $("#p1").mouseenter(function(){
                        alert("您把鼠标放在了此元素上！");
                    });
                    $("#p1").mouseleave(function(){
                        alert("您把鼠标移离了此元素！")
                    })
                })
            </script>
        <title>mouseenter</title>
    </head>
    <style>
        .div1{
            background-color: red;
            width: 200px;
            height: 200px;
        }
    </style>
    <body>
        <div id="p1">
        </div>
    </body>
</html>

mouseenter与mouseleave为分开的两个事件，需要通过两次选择实现这两个事件。

posted @ 2018-01-18 11:14  SKZB  阅读(306)  评论(0)    收藏  举报