JQuery - Mouseleave VS Mouseout

Today, I just realize that Mouseout will trigger if we go to the child of that container. Luckily JQuery has MouseLeave event which solve this problem.

Mouseover fires when the pointer moves into or out from child element, while mouseenter does't.

It is not standard DOM event so you need to use Bind method from JQUERY.

   $("div.overout").mouseover(function(){
     $("p:first",this).text("mouse over");
     $("p:last",this).text(++i);
   }).mouseout(function(){
     $("p:first",this).text("mouse out");
   });
   });

$("div.enterleave").bind("mouseenter",function(){
     $("p:first",this).text("mouse enter");
     $("p:last",this).text(++n);
   }).bind("mouseleave",function(){
     $("p:first",this).text("mouse leave");
   });