Question

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

MouseOver():

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

MouseEnter():

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?

Answer 1

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

http://jsfiddle.net/ZCWvJ/7/

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

$('#my_div').bind("mouseover mouseenter", function(e) {
  var el = $("#" + e.type);
  var n = +el.text();
  el.text(++n);
});

#my_div {
  padding: 0 20px 20px 0;
  background-color: #eee;
  margin-bottom: 10px;
  width: 90px;
  overflow: hidden;
}

#my_div>div {
  float: left;
  margin: 20px 0 0 20px;
  height: 25px;
  width: 25px;
  background-color: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div>MouseEnter: <span id="mouseenter">0</span></div>
<div>MouseOver: <span id="mouseover">0</span></div>

<div id="my_div">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>