jQuery hover() Method

Last Updated : 11 Jul, 2025

The jQuery hover() is an inbuilt method that is used to specify two functions to start when the mouse pointer moves over the selected element.

Syntax:

$(selector).hover(Function_in, Function_out);

Here selector is the selected element.

Parameter: It accepts two parameters which are specified below-

Function_in: It specifies the function to run when the mouse-enter event occurs.
Function_out: It is optional and specifies the function to run when the mouse-leave event occurs.

Example 1: jQuery code to show the working of the hover() method.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        //jQuery code to show the working of hover() method
        $(document).ready(function () {
            $("p").hover(function () {
                $(this).css("background-color", "green");
            }, function () {
                $(this).css("background-color", "yellow");
            });
        });
    </script>
    <style>
        p {
            width: 55%;
            height: 80px;
            padding: 20px;
            margin: 10px;
            border: 2px solid green;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <!--move the mouse in and out over this paragraph
        and background color will change-->
    <p>GeeksforGeeks !</p>
</body>

</html>

Output:

Example 2: In this example, we will change the font size by hovering the mouse in and out.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        // jQuery code to show the working of hover() method
            $(document).ready(function () {
                $("p").hover(function () {
                    $(this).animate({ fontSize: "+=14px" });
                }, function () {
                    $(this).animate({ fontSize: "-=14px" });
                });
            });
    </script>
    <style>
        p {
            width: 55%;
            height: 80px;
            padding: 20px;
            margin: 10px;
            border: 2px solid black;
            font-size: 50px;
            background-color: rgb(22, 153, 22);
        }
    </style>
</head>

<body>
    <!--move the mouse in and out over this paragraph
        and font-size will change-->
    <p>GeeksforGeeks !</p>
</body>

</html>