The jQuery hover() is an inbuilt method that is used to specify two functions to start when the mouse pointer moves over the selected element.
Syntax:
$(selector).hover(Function_in, Function_out);
Here selector is the selected element.
Parameter: It accepts two parameters which are specified below-
- Function_in: It specifies the function to run when the mouse-enter event occurs.
- Function_out: It is optional and specifies the function to run when the mouse-leave event occurs.
Example 1: jQuery code to show the working of the hover() method.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
//jQuery code to show the working of hover() method
$(document).ready(function () {
$("p").hover(function () {
$(this).css("background-color", "green");
}, function () {
$(this).css("background-color", "yellow");
});
});
</script>
<style>
p {
width: 55%;
height: 80px;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 50px;
}
</style>
</head>
<body>
<!--move the mouse in and out over this paragraph
and background color will change-->
<p>GeeksforGeeks !</p>
</body>
</html>
Output:
Example 2: In this example, we will change the font size by hovering the mouse in and out.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
// jQuery code to show the working of hover() method
$(document).ready(function () {
$("p").hover(function () {
$(this).animate({ fontSize: "+=14px" });
}, function () {
$(this).animate({ fontSize: "-=14px" });
});
});
</script>
<style>
p {
width: 55%;
height: 80px;
padding: 20px;
margin: 10px;
border: 2px solid black;
font-size: 50px;
background-color: rgb(22, 153, 22);
}
</style>
</head>
<body>
<!--move the mouse in and out over this paragraph
and font-size will change-->
<p>GeeksforGeeks !</p>
</body>
</html>
Output:
