mouseover事件與mouseenter事件的區別

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 事件。