Open In App
Related Articles

jQuery mouseenter() Method

Improve Article
Improve
Save Article
Save
Like Article
Like

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
Similar Reads
Related Tutorials