mouseover事件与mouseenter事件的区别

mouseover事件与mouseenter事件的区别

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

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

我们来看看css代码！！！

<style type="text/css" media="screen">
    .box{

     200px;

    height: 200px;

    background: pink;

    }

    .xia{

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