4
In jQuery, what is the difference between mouseleave
and mouseout
?
The two events seem to do the same thing!
4
In jQuery, what is the difference between mouseleave
and mouseout
?
The two events seem to do the same thing!
3
Suppose we have the following HTML (where each div has mouseout events, mouseleave attached):
<div id="outerBox">OuterBox
<div id="innerBox">InnerBox
</div>
</div>
when the mouse leaves "outerBox" its event is triggered.
Mouseleave: - When the mouse enters "outerBox" no event is activated.
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/
3
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:
Browser other questions tagged jquery
You are not signed in. Login or sign up in order to post.