mouseover事件与mouseenter事件的区别

不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。对应mouseout
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave
我们来看看css代码!!!
<style type="text/css" media="screen">
    .box{

    width: 200px;

    height: 200px;

    background: pink;

    }

    .xia{

      width: 50px;

      height: 50px;

      background: red;

    }
</style>
我们来看看HTML代码!!!
<div class="box">
    <div class="xia"></div>
</div>
我们来看看jQuery代码!!!
<script type="text/javascript">
    $(".box").mouseover(function () {
        console.log("over");
            $(this).css({
                   "background":"yellow"
            })
    })

    $(".box").mouseout(function () {
       console.log("out");
            $(this).css({
                   "background":"green"
            })
    })
    $(".box").mouseenter(function () {
        console.log("over");
            $(this).css({
                   "background":"yellow"
            })
    })

    $(".box").mouseleave(function () {
       console.log("out");
            $(this).css({
                   "background":"green"
            })
    })
</script> 

代码了解完了,我们来总结一下吧!!!

mouseover与mouseenter

不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。

只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

mouseout与mouseleave

不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。

只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。