Updated March 20, 2023
Introduction to jQuery hover()
The jQuery hover() method uses to handle the mouse hover event. This method is a built-in method of jQuery. The jQuery hover() method uses to executes two functions when the mouse pointer moves over the selected HTML element. When the mouse pointer moves over the HTML element generate two events the mouse enter and mouse leave events, it handles both the mouse enter and mouse leave events. Both the mouse enter and mouse leave events handle by two different functions.
Syntax of the jQuery hover():
$(selector).hover(Functionin, Functionout)$(selector).hover(Functioninout)Parameters:
- Functionin: Functionin parameter is used to specify which function is to be executed when the mouse pointer enters the specified HTML element.
- Functionout: Functionout parameter is used to specify which function is to be executed when the mouse pointer leaves the specified HTML element.
- Functioninout: Functioninout parameter is used to specify which function is to be executed for both mouse pointer enters and the mouse pointer leaves the specified HTML element.
Examples of the jQuery hover()
Following are the different examples of jQuery hover() are explained in detail.
Example #1 – With Functionin and Functionout parameters
Next, we write the HTML code to understand the method more clearly with the following example:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> This is an example for jQuery hover() Method </title>
<script src="https://code.jquery.com/jquery-1.10.2.js" > </script>
<script>
$(document).ready(function(){
$("h2").hover(function(){
$(this).css( "background-color", "red" );
}, function(){
$(this).css( "background-color", "pink" );
});
});
</script>
</head>
<body>
<h2> Move mouse pointer over the text! </h2>
</body>
</html>Output:
Once we move the mouse pointer over the text or enter the mouse pointer, the output is:
Once the mouse pointer leaves the text, the output is:
In the above example code, when we hover the mouse pointer over the selected element that is text, the text background color changes to red and pink.
Example #2 – With Functioninout parameter
Next, we write the HTML code to understand the method for handling both events by using a single function that is Functioinout:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> This is an example for jQuery hover() Method </title>
<script src="https://code.jquery.com/jquery-1.10.2.js" > </script>
<script>
$(document).ready(function(){
$("h2").hover(function(){
$(this).css( "background-color", "red" );
});
});
</script>
</head>
<body>
<h2> Move mouse pointer over the text! </h2>
</body>
</html>Output:
Once we move the mouse pointer over the text or enter the mouse pointer, the output is:
Once the mouse pointer leaves the text, the output is:
In the above example code, when we hover (enter and leave) mouse pointer over the selected element that is text, the text background color changes to red.
Example #3 – With fadeIn and fadeOut function effect
Next, we write the HTML code to understand the method to perform fadeIn and fadeOut effect on mouse hover the selected element:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery hover() Method </title>
<style>
li {
cursor: default;
}
ul {
margin-left: 30px;
color: black;
background: yellow;
}
h2 {
color: red;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js" > </script>
</head>
<body>
<h2> Fruits : </h2>
<ul>
<li class="fade" > Apple </li>
<li class="fade" > Orange </li>
<li class="fade" > Banana </li>
<li class="fade" > Mango </li>
</ul>
<script>
$( "li" ).hover(
function() {
$( this ).append( $( "<span> ... </span>" ) );
}, function() {
$( this ).find( "span:last" ).remove();
}
);
$( "li.fade" ).hover(function() {
$( this ).fadeOut( 150 );
$( this ).fadeIn( 550 );
});
</script>
</body>
</html>Output:
Once the mouse pointer hovers the fruits list the list item gives fade effect.
Example #4 – With hide() and slideToggle() function effect
Next, we write the HTML code to understand the method to perform hide() and slideToggle() effect on mouse hover the selected element:
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title> This is an example for jQuery hover() Method </title>
<style>
ul {
margin-left: 20px;
color: blue;
}
li.active {
background: black;
color: white;
}
li {
cursor: default;
}
h2 {
color: red;
}
span {
color:red;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<h2> Fruits : </h2>
<ul>
<li> Apple </li>
<li> <span> Red colour </span> </li>
<li> Banana </li>
<li > <span> Yellow colour </span> </li>
<li> Orange </li>
<li> <span> Orange colour </span> </li>
<li> Mango </li>
<li> <span> Yellow colour </span> </li>
</ul>
<script>
$( "li" )
.filter( ":odd" )
.hide()
.end()
.filter( ":even" )
.hover(function() {
$( this )
.toggleClass( "active" )
.next()
.stop( true, true )
.slideToggle();
});
</script>
</body>
</html>Output:
Once the mouse pointer hover the text, the output is:
In the above example code, when we hover (enter) mouse pointer over the selected element that is a list item, the odd text display.
Conclusion
The jQuery hover() method uses to handle the mouse hover event. This method is a built-in method of jQuery. This method uses to executes two functions when the mouse pointer moves over the selected HTML element. Both the mouse enter and mouse leave events handle by two different functions.
Recommended Articles
This is a guide to jQuery hover(). Here we discuss the introduction, parameters and various examples of jQuery with code implementation. You may also look at the following articles to learn more –
