jQuery学习笔记16-移入移出事件

最新推荐文章于 2024-04-07 10:29:49 发布

weeds606

最新推荐文章于 2024-04-07 10:29:49 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/doulihang/article/details/100191134

版权

前端相关专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery移入移出事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>

    <script src="jQuery/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            * 移入移出事件
            * 1.mouseover、mouseout移入移出，移动到子元素时，会触发事件
            * 2.mouseenter、mouseleave移入移出，移动到子元素时，不会触发事件
            * 3.hover传入两个参数，第一个参数表示移入触发的事件，第二个参数表示移出触发的事件。
            * hover传入一个参数，移入移出都会触发该事件
            * 注意：hover移动到子元素时，不会触发事件
            * */
            // //mouseover、mouseout移入移出，移动到子元素时，会触发事件
            // 移入监听
            // $(".father").mouseover(function () {
            //     console.log("移入");
            // });
            // 移出监听
            // $(".father").mouseout(function () {
            //     console.log("移出");
            // });
            // //mouseenter、mouseleave移入移出，移动到子元素时，不会触发事件
            // 移入监听
            // $(".father").mouseenter(function () {
            //     console.log("移入");
            // });
            // 移出监听
            // $(".father").mouseleave(function () {
            //     console.log("移出");
            // });

            // //hover传入两个参数，第一个参数表示移入触发的事件，第二个参数表示移出触发的事件
            // 移动到子元素时不会触发事件
            // $(".father").hover(function () {
            //     console.log("移入");
            // },
            // function () {
            //     console.log("移出");}
            //     );

            //hover传入一个参数，移入移出都会触发该事件
            $(".father").hover(function () {
                console.log("移入、移出");
            }
                );
        })

    </script>
</head>
<body>
<div class="father">
    <div class="son">

    </div>
</div>
</body>
</html>