Open In App

jQuery mouseenter() Method

Improve
Improve
Like Article
Like
Save
Share
Report

The jQuery mouseenter() method is an inbuilt method which works when mouse pointer moves over the selected element. 

Syntax:

$(selector).mouseenter(function)

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

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>The mouseenter Method</title>
    <script src=
    </script>
  
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("p").mouseenter(function () {
                $("p").css("background-color", "green");
            });
        });
    </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 mouseenter Method</title>
    <script src=
    </script>
  
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("p").mouseenter(function () {
                alert("Mouse moved over this paragragh");
            });
        });
    </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