What is the difference between mouseleave and mouseout?

Basically, the only difference between the two is that mouseleave is also fired on the child elements of the selected element, and mouseout fires only on the selected element.

x = 0;
y = 0;
$(document).ready(function(){
    $("div.over").mouseout(function(){
        $(".over span").text(x += 1);
    });
    $("div.enter").mouseleave(function(){
        $(".enter span").text(y += 1);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><divclass="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
  <h3 style="background-color:white;">Mouseout disparado: <span></span></h3>
</div>

<div class="enter" style="background-color:lightgray;padding:20px;width:250px;float:right">
  <h3 style="background-color:white;">Mouseleave disparado: <span></span></h3>
</div>

Here you can check out more about these two events events:

mouseout

mouseleave

Suppose we have the following HTML (where each div has mouseout events, mouseleave trailers):

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

• Mouseout : When the mouse goes into "outerBox" no event is enabled.
• When the mouse leaves "outerBox" and goes into "innerBox" the "outerBox" event is activated.
• When the mouse leaves "innerBox" and goes into "outerBox" the "innerBox" event is activated followed by the outerBox event.

• When the mouse leaves "outerBox" your event is fired.

• Mouseleave : - When the mouse goes into "outerBox" no event is enabled.

• When the mouse leaves "outerBox" and goes into "innerBox" no event is enabled.
• When the mouse leaves "innerBox" and goes into "outerBox" the "innerBox" event is activated.
• When the mouse leaves "outerBox" your event is fired.

  

As soon as you can see that the differences between the two are related to your "children", " mouseleave " is also fired in the child elements while the mouseover selected.

Source: link