The jQuery mouseout() method is used to attach a function to run when a mouseout event occurs i.e., when the mouse cursor leaves the selected element.
The mouseout() and mouseleave() methods are more or like similar. The only difference lies in event triggering. The mouseleave event triggers if the mouse pointer leaves the selected element whereas the mouseout event triggers if the mouse cursor leaves any child elements of the selected element or the selected element itself.
Syntax:
To trigger the mouseout event for selected elements.
$(selector).mouseout()
To add a function to the mouseout event.
$(selector).mouseout(function)
Function:
- It is an optional parameter.
- The function parameter specifies the function to run when the event occurs.
Example1:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
("body").mouseout(function(){
$("body").css("background-color", "orange");
});
});
</script>
</head>
<body>
<h1> Hello </h1>
<p>Move your cursor over this paragraph.</p>
</body>
</html>
Example2:
<!DOCTYPE html>
<html>
<head>
<style>
div.out {
width: 60%;
height: 120px;
margin: 15px;
background-color: turquoise;
}
div.in {
width: 60%;
height: 60%;
background-color: blue;
margin: 10px auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="out">
<span style="padding:20px">move your mouse</span>
<div class="in"></div>
</div>
<script>
$( "div.out" )
.mouseover(function() {
$( this ).find( "span" ).text( "mouse over " );
})
.mouseout(function() {
$( this ).find( "span" ).text( "mouse out " );
});
</script>
</body>
</html>