Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery mouseout() Method
jQuery | mouseout() Method: Learn about the jQuery mouseout() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 20, 2022
mouseout() Method
Events in jQuery are the actions that the user performs on the web page. It can be anything – related to mouse clicks, keyboard presses, etc. Using jQuery, we can control these events in the order we want and can also attach some custom functions to it if needed. That means, we can use predefined event methods for the actions and also define a function that gets fired when the event method is triggered. Overall, this makes the website more dynamic on the user’s end. Let’s learn about the mouseout() method here.
The mouseout() method is a built-in jQuery method. This event gets triggered when the mouse pointer moves out from the selected element. It gets executed once, every time the pointer exits the element. The attached function is then fired for the same.
The mouseout() method detects the pointer when the mouse moves out from the parent element as well as the child element. Unlike, mouseleave() method, which is only used to work for parent elements, mouseout() method executes for both – parent & child elements.
mouseout() Method Syntax
$('selector').mouseout();
$('selector').mouseout(function);
It takes one optional parameter – function. The function is the custom function that can be defined to do some tasks when this method gets triggered.
The below example shows how the mouseout() method gets executed once the mouse moves out of the selected div element. Generally, mouseout() is used along with the mouseover() method in jQuery.
jQuery mouseout() Method Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h2>jQuery Event - Mouse Out</h2>
<p>Get to know when the mouse pointer exists an element.</p>
<hr>
<div style="font-size: larger; color: teal; font-weight: bolder;" id="one">Welcome to Include Help !!! </div>
<hr>
<h3 style="color: #F58311;"></h3>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('div').mouseover(function(){
$('h3').html('');
});
$('div').mouseout(function(){
$('h3').html('Mouse Out Triggered');
});
});
</script>
</html>
Output:
