jQuery Hover() event method; In this tutorial, you will learn what is jQuery hover event and how to use hover event with html elements.
jQuery Hover() Event Method with Example
The hover() method in jQuery is used to attach event handlers to an element for both the “mouseenter” and “mouseleave” events. These events are triggered when the mouse pointer enters and leaves the selected HTML element’s boundaries. By using, you can conveniently set up actions to be performed when the mouse enters and exits the element.
Syntax of jQuery Hover() Event Method
$(selector).hover(inFunction,outFunction)
Parameters of jQuery Hover() Event Method
- InFunction :- It is a mandatory parameter. This is executed the function when mouseenter event occurs.
- OutFunction :- It is an optional parameter. This is executed the function when mouseleave event occurs.
Examples of jQuery Hover() Event Method
Let’s see example 1 of hover event
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#first").hover(function(){
$(this).css("background-color", "red");
}, function(){
$(this).css("background-color", "green");
});
});
</script>
</head>
<body>
<h4 id="first">Hover your mouse pointer on here!</h4>
</body>
</html>
Result :-
Hover your mouse pointer on here!
In this above example 1, When we will cursor pointer on html elements, the jQuery hover method trigger.
Let’s see example 2 of hover event
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#second").hover(function(){
$( this ).append( $( "<b> Thank for reading </b>" ) );
}, function(){
$( this ).find( "b:last" ).remove();
});
});
</script>
</head>
<body>
<h4 id="second">Hover your mouse pointer on here!</h4>
</body>
</html>
Result :-
Hover your mouse pointer on here!
In this above example 2, When we will cursor pointer on html elements, the jQuery hover method trigger and show text “thanks for reading”.
Recommended jQuery Tutorials
Recommended:-jQuery Event Mouseenter Example
Recommended:-Event jQuery MouseOver & MouseOut By Example
Recommended:-Jquery Selector by .class | name | #id | Elements
Recommended:-Get the Current Page URL in jQuery
Recommended:-jQuery Ajax Get() Method Example
Recommended:-jQuery Get Data Text, Id, Attribute Value By Example
Recommended:-Set data attribute value jquery
Recommended:-select multiple class in jquery
Recommended:-How to Remove Attribute Of Html Elements In jQuery
Recommended:-Get radio button value jquery by id, name, class
Recommended:-jQuery scrolltop animate example
Recommended:-jQuery – Remove Elements From array jQuery
Recommended:-Array to Comma Separated String jQuery
Recommended:-jQuery Ajax Form Submit with FormData Example
Recommended:-jQuery Form Validation Custom Error Message
