jQuery的hover事件

最新推荐文章于 2023-02-09 11:06:43 发布

置顶 riverrun_z

最新推荐文章于 2023-02-09 11:06:43 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_48047636/article/details/124797369

jquery 专栏收录该内容

9 篇文章

订阅专栏

本文详细探讨了jQuery中的hover事件，如何使用它来实现元素的悬停效果，包括鼠标进入和离开时的不同操作。通过实例代码，解释了hover事件如何结合匿名函数实现复杂的前端交互，同时对比了与JavaScript原生事件处理的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
    <div id="d1">
        <div id="d2">
            <div id="d3"></div>
        </div>
    </div>
    <script src="../jquery-1.8.3.min.js"></script>
    <script>
        /* $("#d1").mouseover(function(){
            console.log("----------");
            console.log("鼠标进入d1");
        }).mouseout(function(){
            
            console.log("鼠标移出d1");
        });*/
        /*如果只给最外层绑定鼠标进入鼠标移出的事件会有什么问题
          会出现鼠标移入第二层第一层的时候并没有离开第三层
          也会出现触发mouseout
          解决:用jq的mouseenter和mouseleave
        */
          /*  $("#d1").mouseenter(function(){
            console.log("----------");
            console.log("鼠标进入d1");
        })
            .mouseleave(function(){
            console.log("鼠标移出d1");
        });
        */
        //mouseenter和mouseleave的简写形式就是hover()括号里面是两个
        //分别为mouseenter和mouseleave的function
        $("#d1").hover(
        function(){console.log("进去")},
        function(){console.log("离开")}
        );
    </script>
</body>

在这里插入图片描述

    <style>
        .kk{
            width: 100px;
            height: 100px;
            background-color: violet;
        }
        .kk:hover{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="kk">我有hover</div>
    <script src="../jquery-1.8.3.min.js"></script>
    <script>
        //hover中的mouseenter和mouseleave简写成toggleClass
        $(".kk").hover(
            //addclass就是增加class的某个属性
            //removeclass就是去掉class某个属性
           // function(){$(this).addClass("hover")},
           // function(){$(this)}.remove("hover")
           //由于addclass和removeclass这两个一直是来回切换的,
           //所以可以直接写成一个toggle
           function(){$(this).toggleClass("hover")}
            )
    </script>
</body>

在这里插入图片描述