jQuery鼠标事件方法的区别mouseover() 、.mouseout()、.mouseenter() 、 .mouseleave() 图解

99 little bugs in the code..

于 2021-11-08 20:54:26 发布

阅读量692

点赞数 1

分类专栏：前端(js jq h5 css3) 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_53731984/article/details/121215965

版权

前端(js jq h5 css3) 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

鼠标事件方法的区别

方法	相同点	不同点
.mouseover()	鼠标进入被选元素时触发	鼠标在其备选元素的子元素上来回进入时触发mouseover()，不触发mouseenter
.mouseenter()	同上	同上
.mouseout()	鼠标离开备选元素时触发	鼠标在其备选元素的子元素上来回离开时触发mouseout()，不触发mouseleave
.mouseleave()	同上	同上

.mouseover()和 .mouseout()的效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>当当图书导航2</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .out{
            width: 400px;
            height: 400px;
            background: #0D7114;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .inner{
            width: 150px;
            height: 150px;
            background: #00D0FF;
        }
    </style>
</head>
<body>
<div class="out">
    <span></span>
    <div class="inner"></div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    var c = 0;
    var d = 0;
    $(function (){
        $(".out").mouseover(function () {
            $("span").text(++c);
        }).mouseout(function (){
            $("span").text(++d);
        })
    })
</script>
</body>
</html>

.mouseenter() 和 .mouseleave()的效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>当当图书导航1</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .out{
            width: 400px;
            height: 400px;
            background: #0D7114;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .inner{
            width: 150px;
            height: 150px;
            background: #00D0FF;
        }
    </style>
</head>
<body>
<div class="out">
    <span></span>
    <div class="inner"></div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    var c = 0;
    var d = 0;
    $(function (){
        $(".out").mouseenter(function () {
            $("span").text(++c);
        }).mouseleave(function (){
            $("span").text(++d);
        })
    })
</script>
</body>
</html>

图解：
效果区别的GIF图

mouseover()和 .mouseout()的效果:

可以看出，不管触碰out 还是 inner 都会增加他的次数

mouseover()和 .mouseout()的效果

.mouseenter() 和 .mouseleave()的效果

而这个只有触碰 out 才能增加次数

在这里插入图片描述

99 little bugs in the code..

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery鼠标事件方法的区别mouseover() 、.mouseout()、.mouseenter() 、 .mouseleave() 图解

鼠标事件方法的区别方法相同点不同点.mouseover()鼠标进入被选元素时触发鼠标在其备选元素的子元素上来回进入时触发mouseover()，不触发mouseenter.mouseenter()同上同上.mouseout()鼠标离开备选元素时触发鼠标在其备选元素的子元素上来回离开时触发mouseout()，不触发mouseleave.mouseleave()同上同上.mouseover()和 .mouseout()的效果<!docty
复制链接

扫一扫