Open In App

jQuery mouseout() Method

Improve
Improve
Like Article
Like
Save
Share
Report

The jQuery mouseout() method is an inbuilt method which is used when mouse pointer moves out from the selected element. 

Syntax:

$(selector).mouseout(function)

Parameters: This method accepts single parameter function which is optional. This parameter is used to specify the function to run when the mouseout event is called. 

Example 1: This example illustrates the use of mouseout() method.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>The mouseover Method</title>
    <script src=
    </script>
  
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("p").mouseover(function () {
                $("p").css("background-color", "lightgreen");
            });
            $("p").mouseout(function () {
                $("p").css("background-color", "lightgray");
            });
        });
    </script>
    <style>
        body {
            width: 420px;
            padding: 40px;
            height: 30px;
            border: 2px solid green;
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
  
<body>
    <!-- move over this text to see the change -->
    <p>Move the mouse pointer over this paragraph.</p>
</body>
  
</html>


Output: 

 

Example 2: In this example, a pop-up will come out when the mouse moves out from the paragraph.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>The mouseover Method</title>
    <script src=
    </script>
  
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("p").mouseover(function () {
                $("p").css("color", "red");
            });
            $("p").mouseout(function () {
                alert("Mouse moved out from the paragraph");
            });
        });
    </script>
    <style>
        body {
            width: 420px;
            padding: 40px;
            height: 30px;
            border: 2px solid green;
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
  
<body>
    <!-- move over this text to see the change -->
    <p>Move the mouse pointer over this paragraph.</p>
</body>
  
</html>


Output:

 



Last Updated : 18 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads