How to run a code on hover event in jQuery ?

Last Updated : 31 May, 2023

In this article, we will see how to change the style of elements on hover event using jQuery. To change the style of hover event, hover() method is used. The hover() method is used to specify two functions to start when the mouse pointer moves over the selected element.

Syntax:

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

Parameter: It accepts two parameters which are specified below-

Function_in: It specifies the function to run when the mouse move event occurs.
Function_out: It is optional and specifies the function to run when the mouse move out event occurs.

Here, we have created a paragraph element and when mouse move over the paragraph element, the style of element will change.

Example: In this example, we are using the above-explained method.

HTML

<!DOCTYpe html>
<html>
<head>
    <title>
        How to run a code on hover
        event in jQuery?
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
 
    <script>
        $(document).ready(function () {
            $(document).ready(function () {
                $("p").hover(function () {
                    $(this).css({
                        backgroundColor: "green",
                        fontSize: "30px",
                        color: "white"
                    });
                }, function () {
                    $(this).css("background-color", "yellow");
                });
            });
        });
    </script>
</head>
 
<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to run a code on hover event in jQuery?
    </h3>
    <p>Welcome to GeeksforGeeks</p>
</body>
</html>