mouseover vs. mouseenter

by hejdav

HTML

<div id="foo" style="width:100px; height:100px; background-color: black;">
  <div style="width:50px; height:50px; background-color: red;">
  </div>
</div>
<div id="bar">-</div>

<div id="foo2" style="width:100px; height:100px; background-color: black;">
  <div style="width:50px; height:50px; background-color: red;">
  </div>
</div>
<div id="bar2">-</div>

JavaScript

var bar = $('#bar');
$('#foo').on('mouseover', function () {
	bar.append($('<span>x</span>'));
});

var bar2 = $('#bar2');
$('#foo2').on('mouseenter', function () {
	bar2.append($('<span>x</span>'));
});