Open In App

How to run a code on mouseenter event in jQuery ?

Last Updated : 25 Mar, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to run the code when the mouse enters into the specific area using jQuery. To run the code on a mouse enter a specific area, mouseenter() method is used. The mouseenter() method works when the 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() method is called.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to run a code on mouseenter
        event in jQuery?
    </title>
  
    <script src=
    </script>
  
    <script>
        $(document).ready(function () {
            $(".main").mouseenter(function () {
                $(".main").css({
                    background: "green",
                    color: "white"
                });
            });
        });
    </script>
  
    <style>
        body {
            text-align: center;
        }
  
        .main {
            width: 300px;
            height: 200px;
            border: 2px solid black;
        }
    </style>
</head>
  
<body>
    <div class="main">
        <h1>GeeksforGeeks</h1>
  
        <h3>
            How to run a code on mouseenter
            event in jQuery?
        </h3>
    </div>
</body>
  
</html>


Output:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads