In jQuery, both mouseover() and mouseenter() events are fire when the mouse enters the matched element. The only different is in the way of the “event bubbling” handle in child element, let’s see two scenarios :

1. NO child element

If the matched elements have no child element, both mouseover() and mouseenter() events are work exactly same. See try it yourself below.

2. WITH child element inside

If the matched elements have child element, both mouseover() and mouseenter() events are work different in the way of “event bubbling” :

For example, a “outerBox” contains a child element “innerBox”.

<div id="outerBox">OuterBox
	<div id="innerBox">InnerBox
	</div>
</div>

P.S Assure both outerBox and innerBox are attached to certain events.

mouseover()
  1. When mouse enters the “outerBox”, fire the “outerBox” event.
  2. When mouse enters the “innerBox”, fire the “innerBox” event, follow by the “outerBox” event.
  3. When mouse enters back to the “outerBox”, fire the “outerBox” event.
mouseenter()
  1. When mouse enters the “outerBox”, fire the “outerBox” event.
  2. When mouse enters the “innerBox”, fire the “innerBox” event.
  3. When mouse enters back to the “outerBox”, no event will fire.

Ya, it’s quite confusing and understand in “words”, let understand it by playing the below example :

Try it yourself

<html>
<head>
 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
 
<style type="text/css">
	#mouseover-outerBox1, #mouseenter-outerBox1,
	#mouseover-outerBox2, #mouseenter-outerBox2{
		margin:8px;
		border:1px groove #999966;
		background-color : #999966;
		width:150px;
		height:150px;
		color:white;
	}
	#mouseover-innerBox2, #mouseenter-innerBox2{
		margin:8px 8px 8px 16px;
		border:1px groove #0000FF;
		background-color : #0000FF;
		width:100px;
		height:100px;
		color:white;
	}
	span{
		padding:8px;
	}
	.content{
		width:500px;
		height:250px;
	}
	.container1{
		float:left;
		padding-right:16px;
	}
</style>
 
</head>
<body>
  <h1>jQuery mouseover() vs mouseenter() example</h1>
 
<div class="content">
  <div class="container1">
	  <span>mouseover() - no child element</span>
	  <div id="mouseover-outerBox1">OuterBox
	  </div>
	  <span id="mouseover-msg1">#mouseover is fired : 0</span>
  </div>
 
  <div class="container1">
  	  <span>mouseenter() - no child element</span>
	  <div id="mouseenter-outerBox1">OuterBox
	  </div>
	  <span id="mouseenter-msg1">#mouseenter is fired : 0</span>
  </div>
</div>
 
 
 
<div class="content">
  <div class="container1">
	  <span>mouseover() - with child elements</span>
	  <div id="mouseover-outerBox2">OuterBox
	  	<div id="mouseover-innerBox2">InnerBox
	  	</div>
	  </div>
	  <span id="mouseover-outer-msg2">#mouseover outer is fired : 0</span>
          <br/>
	  <span id="mouseover-inner-msg2">#mouseover inner is fired : 0</span>
  </div>
 
  <div class="container1">
  	  <span>mouseenter() - with child elements</span>
	  <div id="mouseenter-outerBox2">OuterBox
	  	<div id="mouseenter-innerBox2">InnerBox
	  	</div>
	  </div>
	  <span id="mouseenter-outer-msg2">#mouseenter outer is fired : 0</span>
          <br/>
	  <span id="mouseenter-inner-msg2">#mouseenter inner is fired : 0</span>
  </div>
</div>
 
<script type="text/javascript">
 
//example 1
var mouseover1=1;
$('#mouseover-outerBox1').mouseover(function(event) {
  $('#mouseover-msg1').text('#mouseover is fired : ' + mouseover1++)
});
 
var mouseenter1=1;
$('#mouseenter-outerBox1').mouseenter(function(event) {
  $('#mouseenter-msg1').text('#mouseenter is fired : ' + mouseenter1++)
});
 
//example 2
var mouseoverouter2=1;
$('#mouseover-outerBox2').mouseover(function(event) {
  $('#mouseover-outer-msg2')
              .text('#mouseover outer is fired : ' + mouseoverouter2++)
});
 
var mouseoverinner2=1;
$('#mouseover-innerBox2').mouseover(function(event) {
  $('#mouseover-inner-msg2')
              .text('#mouseover inner is fired : ' + mouseoverinner2++)
});
 
var mouseenterouter2=1;
$('#mouseenter-outerBox2').mouseenter(function(event) {
  $('#mouseenter-outer-msg2')
              .text('#mouseenter outer is fired : ' + mouseenterouter2++)
});
 
var mouseenterinner2=1;
$('#mouseenter-innerBox2').mouseenter(function(event) {
  $('#mouseenter-inner-msg2')
               .text('#mouseenter inner is fired : ' + mouseenterinner2++)
});
 
</script>
</body>
</html>
Try Demo
Any Java questions or problems? please post at this JavaNullPointer.com forum, see you there ~
[ Read More ] You can find more similar articles at jQuery Tutorials