Skip to content
Related Articles

Related Articles

Improve Article

Difference between hover() and mouseover() methods in jQuery

  • Last Updated : 01 Sep, 2021
Geek Week

Before learning the difference between the hover() and mouseover() method of jQuery, let’s briefly see both methods.

hover() Method: When we hover our mouse cursor to any element, two events happen i.e. mouseenter and mouseleave.

  • mouseenter: When we bring the cursor over the element.
  • mouseleave: When we remove the cursor from the element.

The hover()method binds handlers for both mouseenter and mouseleave events. Basically, with the hover() method, we will specify what to do when the cursor enters the element and we will specify what to do when the cursor leaves that element. 

Syntax:

$( selector ).hover( handlerIn, handlerOut )

 



Parameters: It accepts two functions i.e. handlerIn and handlerOut.

  • handlerIn: This function will be executed when the cursor enters the element.
  • handlerOut: (Optional) This function is executed when the cursor leaves the element.

When we provide only one function as an argument to the hover() method, then that function will be executed for both mouseenter as well as mouseleave events.

Example: In this example, we will see how to use the hover() method. We have a word, and we will try to change the color of it whenever the cursor enters the element. The color will change back when the cursor leaves that element.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- jQuery library -->
    <script src=
    </script>
</head>
  
<body>
    <h2>GeeksforGeeks</h2>
  
    <script>
  
        // Calling hover() method 
        // on h1 tag
        $("h2").hover(
  
            // mouse-enter event
            function () {
  
                // changing the color
                $("h2").css('color', 'green')
            },
  
            // mouse-leave event
            function () {
  
                // Putting the color back
                $("h2").css('color', 'black')
            })
    </script>
</body>
  
</html>

Output:

hover method

Mouseover() Method: The mouseover() method will be executed when the mouseover event occurs. The mouseover event occurs when the cursor enters the element and then the mouseover() method for that element will be executed. We can also attach a function that will be executed when the mouseover() method is called.

Syntax:

$(selector).mouseover(handler)

Parameter: (Optional) It accepts a function that will be executed when the mouseover() method is called.

Example:In this example, we will see how to use the mouseover() method.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- jQuery library -->
    <script src=
    </script>
</head>
  
<body>
    <h2>GeeksforGeeks</h2>
  
    <script>
        $("h2").mouseover(
            function () {
                // changing the color
                $("h2").css('color', 'red')
            })
    </script>
</body>
  
</html>

Output:

Difference between hover() and mouseover() methods:

hover()

mouseover()

Bind two handlers to the matched elements, to be executed when the cursor enters and leaves the elements.Bind one handler to the matched elements, to be executed when the cursor enters the elements.
It accepts a maximum of two functions as arguments, one for the mouseenter and one for the mouseleave event.It accepts a maximum of one function as an argument which will be executed when a mouseover event occurs.
In the hover() method, when the cursor enters the element or its child element, the handlerIn function is called once and when the cursor leaves the element, the handlerOut function is called once. In the mouseover() method, it works the same as in the hover() method, but in the case of nested elements, When the cursor enters the outer part on which the mouseover event is attached, the mouseover() method gets called, but when the cursor enters the inner part, the mouseover() method calls again. 
The handlerIn and handlerOut function will be called once per element per entry and exitThis method can fire multiple times in the case of the nested elements.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :