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