Skip to content
Related Articles

Related Articles

Improve Article
How to run a code on hover event in jQuery ?
  • Last Updated : 22 Mar, 2021

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:

HTML




<!DOCTYpe html>
<html>
  
<head>
    <title>
        How to run a code on hover
        event in jQuery?
    </title>
  
    <script src=
    </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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :