一、當繫結著兩個事件的元素裡面沒有子元素的時候，這兩個事件的觸發效果是一致的：

x=0;
y=0;
$(document).ready(function(){
  $("div.over").mouseover(function(){
    $(".over").text(x+=1);
  });
  $("div.enter").mouseenter(function(){
    $(".enter").text(y+=1);
  });
});
</script>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
mouseover 事件：
 
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
mouseenter 事件：
</div>

二、當繫結事件的元素裡面有子元素的時候，滑鼠經過繫結mouseover的當前元素以及它裡面的子元素的時候，都會觸發，而經過繫結mouseenter的元素時，只會在滑鼠剛進入的時候觸發，當進入其子元素的時候，是不會再觸發的了

x=0;
y=0;
$(document).ready(function(){
  $("div.over").mouseover(function
 
(){
    $(".over span").text(x+=1);
  });
  $("div.enter").mouseenter(function(){
    $(".enter span").text(y+=1);
  });
});
</script>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被觸發的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被觸發的 Mouseenter 事件：<span></span></h2>
</div>

總結兩句話

• 不論滑鼠指標穿過被選元素或其子元素，都會觸發 mouseover 事件。對應mouseout

• 只有在滑鼠指標穿過被選元素時，才會觸發 mouseenter 事件。對應mouseleave