What is the difference between mouseover() and mouseenter() in jquery?

Question

Am confused with these functions.Can any one tell me the difference and give some example for each .

Answer 1

It's not true that mouseenter "only occurs when the mouse moves from the parent element to the element". The event occurs when the mouse changes from being outside the element to inside it. It doesn't matter which element the mouse came from. It's true that the mouse will often come from the parent, but not always. Eg, if the parent has no padding or border, then the mouse could enter straight from the grandparent, and mouseenter will still fire. In fact, it can even enter the element from outside the viewport (if the element is right at the edge) and the event still fires.

Example:

$(document).ready(function() {
$("#outer_mouseover").bind
("Mouse Over Mouse Out",function(event){
console.log(event.type," :: ",this.id);})
$("#outer_mouseenter").bind
("Mouse enter Mouse leave",function(event){
console.log(event.type," :: ",this.id);})
 });