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

01 Sep, 2021
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="https://code.jquery.com/jquery-git.js">    </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=    "https://code.jquery.com/jquery-git.js">    </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()
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Questions
jQuery-Methods
jQuery-Questions
Picked
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to update Node.js and NPM to next version ?
How to Insert Form Data into Database using PHP ?
REST API (Introduction)
Form validation using HTML and JavaScript
Types of CSS (Cascading Style Sheet)
JQuery | Set the value of an input text field
How to change selected value of a drop-down list using jQuery?
Form validation using jQuery
How to change the background color after clicking the button in JavaScript ?
How to Dynamically Add/Remove Table Rows using jQuery ?