Open In App

jQuery mouseleave() Method

Improve
Improve
Like Article
Like
Save
Share
Report

The jQuery mouseleave() method is an inbuilt method which works when the mouse pointer leaves the selected element. 

Syntax:

$(selector).mouseleave(function)

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

Example 1: This example illustrates the mouseleave() method in jQuery.

HTML




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


Output: 

 

Example 2: In this example, a pop-up will come out when we move the mouse over the paragraph.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>The mouseleave Method</title>
    <script src=
    </script>
  
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("p").mouseleave(function () {
                alert("Mouse moved over this paragraph");
            });
        });
    </script>
  
    <style>
        body {
            width: 300px;
            padding: 40px;
            height: 30px;
            border: 2px solid green;
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
  
<body>
    <!-- move over this paragraph and pop-up will come -->
    <p>Welcome to GeeksforGeeks!</p>
</body>
  
</html>


Output:

 

Related Articles:



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