What is the difference between mouseleave and mouseout?

Question

In jQuery, what is the difference between mouseleave and mouseout?

The two events seem to do the same thing!

Answer 1

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

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

• Mouseout: When the mouse enters "outerBox" no event is activated.
• When the mouse leaves "outerBox" and enters "innerbox" the "outerBox" event is activated.
• when the mouse leaves "innerbox" and enters "outerBox" the "innerbox" event is activated followed by the "outerBox" event.

• when the mouse leaves "outerBox" its event is triggered.

• Mouseleave: - When the mouse enters "outerBox" no event is activated.

• When the mouse leaves "outerBox" and enters "innerbox" no event is activated.
• when the mouse leaves "innerbox" and enters "outerBox" the "innerbox" event is activated.
• when the mouse leaves "outerBox" its event is triggered.

Soon it is possible to notice that the differences between both are related to their "children" "mouseleave" is also shot in the child elements while the "mouseover" only in the selected element.

Source: http://www.mkyong.com/jquery/different-between-mouseout-and-mouseleave-in-jquery/

Answer 2

Basically, the only difference between the two is that, the mouseleave is also fired into the child elements of the selected element, and the mouseout fires only at 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>



<div class="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:

mouseout

mouseleave