Updated March 27, 2023
Introduction to jQuery mouseout()
The mouse out event takes place when we leave the mouse cursor or pointer from the selected element, and the mouseout() method activates the mouse out an event or binds a function to operate when an event occurs in mouse out. MouseOut events are used for triggering events when a user leaves a mouse out of a given HTML element.
The mouseout() event is typically used together with the mouseover() event. jQuery has introduced custom events called MouseEnter and MouseLeave, which are built on top of the existing mouse over and mouse out events. Both events will move along with the DOM with each mouse over / mouse out event to see whether the user has entered the element or left from the element.
Syntax:
The below syntax is for attaching a function to the mouseout event:
$(selector).mouseout(function)In the above syntax, the function allows an optional single parameter function. This is used to define the function to execute when calling the mouseout event. In a simple manner, it connects the mouseout event to the function.
One more syntax can be used when mouseout event triggers for the selected elements:
$(selector).mouseout()Examples to Implement jQuery mouseout()
Given below are the examples of jQuery mouseout():
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title>jquery Mouse Out Demo</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- The code is used to show the working of mouse out method -->
<script>
$(document).ready(function() {
$(".heading").mouseover(function() {
$(".heading").css("background-color", "green");
});
$(".heading").mouseout(function() {
$(".heading").css("background-color", "grey");
});
});
</script>
<style>
body {
width: 350px;
padding: 30px;
height: 30px;
border: 1px solid green;
font-weight: bold;
font-size: 15px;
}
</style>
</head>
<body>
<span class=" heading ">Mouse over on this text to see the event effect... !!!</p>
</body>
</html>Output:
Save the code with the name of your choice with a .html extension. The above code will produce the below output as shown in the image:
When you hover the mouse pointer in the below image, it will change the color to green.
In the below output, when you hover the mouse pointer on the line or text, the mouse out event will be triggered, and it will be changing the color on the HTML page in 2 seconds.
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<title>jquery Mouse Out Demo</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- The code is used to show the working of mouse out method -->
<script>
m = 0;
n = 0;
$(document).ready(function(){
$("div.heading").mouseout(function(){
$(".heading span").text(m += 1);
});
$("div.enter").mouseleave(function(){
$(".enter span").text(n += 1);
});
});
</script>
</head>
<body>
<p>The event will be triggered when user leave the selected element. </p>
<div class="heading" style="background-color:grey;padding:10px;width:200px;float:left">
<h3 style="background-color:white;">The mouse out event triggered: <span></span></h3>
</div>
</body>
</html>Output:
In the below output, when you hover on the line or text, the mouse out event will be triggered, and it will increment the numbers when leave the mouse from the selected element.
Example #3
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery mouse over demo</title>
<style>
div.out_func {
width: 30%;
height: 100px;
margin: 0 12px;
background-color: green;
}
div.in_func {
width: 50%;
height: 50%;
background-color: grey;
margin: 8px auto;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="out_func">
<span style="padding:20px">Move your cursor poniter on the grey color box...</span>
<div class="in_func"></div>
</div>
<script>
$( "div.out_func" )
.mouseover(function() {
$( this ).find( "span" ).text( "This is mouse over event triggered... !!!" );
})
.mouseout(function() {
$( this ).find( "span" ).text( "This is mouse out evet triggered... !!!" );
});
</script>
</body>
</html>Output:
As shown in the above output, the mouseover event will be triggered when you hover the mouse pointer on the grey color box.
When you move the cursor of the box, then it will trigger a mouse out event.
Example #4
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery mouse over demo</title>
<style>
#parent {
background: cyan;
width: 150px;
height: 160px;
position: relative;
}
#child {
background: grey;
width: 60%;
height: 60%;
position: absolute;
left: 60%;
top: 60%;
transform: translate(-50%, -50%);
}
textarea {
height: 160px;
width: 250px;
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="parent" onmouseover="mouselog_demo(event)" onmouseout="mouselog_demo(event)">This is parent window
<div id="child">This is child window</div>
</div> <br>
<textarea id="text"></textarea> <br>
<input type="button" onclick="text.value=''" value="Clear the data">
<script>
function mouselog_demo(event) {
text.value += `${event.type} [target: ${event.target.id}]\n`.replace(/(:|^)(\d\D)/, '$10$2');
text.scrollTop = text.scrollHeight;
}
</script>
</body>
</html>Output:
As shown in the above output, when you hover the mouse pointer on the grey color box, the mouseover event will be triggered, and when you move the cursor of the box, then it will trigger the mouse out event.
Example #5
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>jquery Mouse Out Demo</title>
<style type="text/css">
#outer_demo {
background-color: #ac9c9c ;
border: 1px solid #b86363 ;
float: left ;
height: 200px ;
margin-right: 15px ;
position: relative ;
width: 200px ;
}
span.inner {
background-color: #71777e ;
border: 1px solid red ;
color: #FFFFFF ;
height: 90px ;
left: 55px ;
line-height: 100px ;
position: absolute ;
text-align: center ;
top: 60px ;
width: 80px ;
}
</style>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script type="text/javascript">
jQuery(function( $ ){
$( "#outer_demo" ).bind(
"mouseover mouseout",
function( event ){
console.log( event.type, " :: ", this.id );
}
);
});
</script>
</head>
<body>
<h1>MouseOver and MouseOut Events</h1>
<div id="outer_demo">
<span class="inner">MouseOver</span>
</div>
</body>
</html>Output:
As shown in the above image, when you over the mouse pointer on the element. You will see the mouseover event in the console, and the mouse out event will be triggered when you leave the mouse cursor out of the selected element.
Conclusion
So far, we have seen how the mouseout event will work in jQuery. The mouseout events occur even when we are moving from the parent element to a child element. The application determines the mouse could only be over one element at a time. In other terms, when the selected items are removed by the mouse cursor pointer at the time the mouse out event occurred. Mouse leave is another event that can only be triggered when the mouse pointer leaves the selected element, whereas mouse out event triggers when the mouse cursor leaves any child elements and the selected element.
Recommended Articles
This is a guide to jQuery mouseout(). Here we discuss the introduction, syntax, and examples to implement jQuery mouseout() with code and output. You may also have a look at the following articles to learn more –
