jQuery mouseleave() vs mouseout() Method
You are Here:
jQuery mouseleave() vs mouseout() Method
The jQuery mouseleave method triggers when a mouse left a specified element.
The jQuery mouseout method triggers when a mouse moved out of a specified element.
Note: Unlike mouseout event, mouseleave event to a parent element will affect its child elements.
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
h1 + div{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
text-align: center;
}
.parentDiv{
border: 1px solid black;
width: 250px;
margin: 5px;
}
.childDiv{
border: 1px solid red;
width: 180px;
height: 50px;
margin: 10px 25px;
}
</style>
</head>
<body>
<h1>jQuery mouseout() vs mouseleave() Method</h1>
<div>
<div class="parentDiv myMouseOut">
Parent Div
<div class="childDiv">Child div<br>Touch me and go away</div>
<p>Mouseout - <span id="point">0</span></p>
</div>
<div class="parentDiv myMouseLeave">
Parent Div
<div class="childDiv">Child div<br>Touch me and go away</div>
<p>Mouseleave - <span id="point1">0</span></p>
</div>
</div>
<script>
$(document).ready(function(){
var count = 0;
var count1 = 0;
$(".myMouseOut").mouseout(function(e){
count += 1;
$("#point").text(count);
});
$(".myMouseLeave").mouseleave(function(e){
count1 += 1;
$("#point1").text(count1);
});
});
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 99.5% of jQuery Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in jQuery.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
