Jquery mouseenter() vs mouseover()


So after reading a recently answered question i am unclear if i really understand the difference between the mouseenter() and mouseover(). The post states


Will fire upon entering an element and whenever any mouse movements occur within the element.


Will fire upon entering an element.

I came up with a fiddle that uses both and they seem to be quite similar. Can someone please explain to me the difference between the two ?

I have also tried reading the JQuery definitions, both say the same thing.

The mouseover event is sent to an element when the mouse pointer enters the element

The mouseenter event is sent to an element when the mouse pointer enters the element.

Can someone please clarify with an example?

This question is tagged with jquery dom-events

~ Asked on 2011-09-02 16:31:47

The Best Answer is


You see the behavior when your target element contains child elements:


Each time your mouse enters or leaves a child element, mouseover is triggered, but not mouseenter.

$('#my_div').bind("mouseover mouseenter", function(e) {_x000D_
  var el = $("#" + e.type);_x000D_
  var n = +el.text();_x000D_
#my_div {_x000D_
  padding: 0 20px 20px 0;_x000D_
  background-color: #eee;_x000D_
  margin-bottom: 10px;_x000D_
  width: 90px;_x000D_
  overflow: hidden;_x000D_
#my_div>div {_x000D_
  float: left;_x000D_
  margin: 20px 0 0 20px;_x000D_
  height: 25px;_x000D_
  width: 25px;_x000D_
  background-color: #aaa;_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>_x000D_
<div>MouseEnter: <span id="mouseenter">0</span></div>_x000D_
<div>MouseOver: <span id="mouseover">0</span></div>_x000D_
<div id="my_div">_x000D_

~ Answered on 2011-09-02 16:45:09


Though they operate the same way, however, the mouseenter event only triggers when the mouse pointer enters the selected element. The mouseover event is triggered if a mouse pointer enters any child elements as well.

~ Answered on 2013-05-03 15:25:05

Most Viewed Questions: