Jquery mouseenter() vs mouseover()

178

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?

This question is tagged with jquery dom-events

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

The Best Answer is


277

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.

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

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


15

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: