mouseout() 方法和mouseleave() 方法的不同

最新推荐文章于 2024-03-21 15:06:28 发布

wy_Blog

最新推荐文章于 2024-03-21 15:06:28 发布

阅读量1.2k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/wy_Blog/article/details/57081324

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

mouseout() 方法：当鼠标从备选元素上和子元素移开时触发对应： mouseover 事件

//鼠标移开变颜色
$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4");
});

mouseleave() 方法： 当鼠标指针离开元素时触发对应： mouseover 事件

$("p").mouseleave(function(){
  $("p").css("background-color","#E9E9E4");
});

两者的不同：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。请看下面例子的演示。


<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    x = 0;
    y = 0;
    $(document).ready(function() {
        $("div.out").mouseout(function() {
            $(".out span").text(x += 1);
        });
        $("div.leave").mouseleave(function() {
            $(".leave span").text(y += 1);
        });
    });
    </script>
</head>

<body>
    <p>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>
    <p>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>
    <div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">
        <h2 style="background-color:white;">被触发的 Mouseout 事件：<span></span></h2>
    </div>
    <div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">
        <h2 style="background-color:white;">被触发的 Mouseleave 事件：<span></span></h2>
    </div>
</body>
</html>

wy_Blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mouseout() 方法和mouseleave() 方法的不同

mouseout() 方法：当鼠标从元素上移开时触发//鼠标移开变颜色$("p").mouseout(function(){ $("p").css("background-color","#E9E9E4");});注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mousel
复制链接

扫一扫

专栏目录