Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Difference between hover() and mouseover() methods in jQuery
The JavaScript library "jQuery" is regarded as the most effective lightweight JavaScript library. Based on the built-in methods, it encapsulates several lines of JavaScript code to carry out a given functionality. A single line of code can easily be used to call these methods. While doing the necessary operation, it shortens the code. Users can use a single line of code to invoke the "hover()" and "mouseover()" jQuery methods when their relevant events occur to carry out the task.
Let’s dive into the article to learn more about the difference between hover() and mouseover() methods in jQuery. Before learning about the difference, let’s have a quick view of the hover() and mouseover() methods.
hover() method
To handle the mouse hover event, we use the jQuery hover() method. When the mouse cursor passes over the chosen HTML element, two actions are carried out. The HTML element generates the mouse enter and mouse leave events when the mouse pointer passes over it, and it responds to both of these events. both the events are handled by the two different function.
Syntax
Following is he syntax for hover() method
$(selector).hover(Functionin, Functionout)
Example
Let’s look at the following example, where we are going to implement the hover() method.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<style>
body {
font-family: verdana;
text-align: center;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<h2>TUTORIALSPOINT</h2>
<script>
$("h2").hover(function() {
$("h2").css('color', '#DE3163')
}, function() {
$("h2").css('color', '#5B2C6F')
})
</script>
</body>
</html>
When we execute the above script, it will generate an output consisting of the text on the webpage. When the user tries to hover the mouse over the text, the event gets triggered and changes its color, and when the user removes the mouse from the text, the event gets triggered and displays a color.
mouseover() method
The mouseover() method in jQuery is used to trigger the mouseover event. It occurs when the mouse pointer is over the selected element.
Syntax
Following is the syntax for mouseover() method
$(selector).mouseover(func)
Example
Considering the following example, where we are going to implement the mouseover() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body {
width: 200px;
padding: 50px;
height: 50px;
border: 2px solid #DE3163;
font-family: verdana;
text-align: center;
}
</style>
</head>
<script>
$(document).ready(function() {
$("p").mouseover(function() {
$("p").css("background-color", "#D5F5E3");
});
});
</script>
<body>
<p>WELCOME.!</p>
</body>
</html>
On running the above script, it will generate an output consisting of a box-like shape along with text inside it displayed on the webpage. When the user tries to move the mouse over the text, the event gets triggered and applies the color to the text.
Difference between hover() and mouseover() methods
Let’s look into the difference between hover() and mouseover() methods −
hover() |
mouseover() |
|---|---|
Bind two handlers to the matched elements so that they will be called when the cursor enters and exits the elements. |
Bind a single handler to the matched element so that it will be called when the cursor enters on the element. |
It can take a maximum of two arguments, one for the mouseenter event and the other for the mouseleave event. |
It only allows one function to be passed in as an argument, and that function will only be used when a mouseover event takes place. |
When using the hover() method, the handlerIn function is called once when the cursor enters the element or one of its children, and the handlerOut function is called once when the pointer exits the element. |
Similar to the hover() method, the mouseover() method is called when the cursor enters the outer part of an element that has a mouseover event attached. However, when the cursor enters the inner part, the mouseover() method is called once more. |
Each element's entry and exit will trigger a single call to the handlerIn and handlerOut functions. |
In the case of nested elements, this method may execute more than once. |
9 Views
