jQuery hover event; Through this tutorial, i am going to show you what is hover event in jQuery and how to use hover event with html elements.
jQuery Hover Event Trigger
hover () event occurs when the mouse pointer enters and leaves the selected HTML element. The jQuery hover function will attach two event handlers to enter the mouse and leave the element.
The jQuery hover() method attaches handlers for mouse enter and mouse leave events.
Syntax jQuery Hover Event Trigger
$(selector).hover(inFunction,outFunction)
Parameters of jQuery Hover Event Trigger
- 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.
Example 1 – jQuery Hover Event Trigger
<!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>
Example 2 – jQuery Hover Event Trigger
<!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>
Recommended jQuery Tutorial
Recommended:-How to Get Element by class, name, id in jQuery
Recommended:-jQuery Events List with Example
Recommended:-jQuery Click() Event Example
Recommended:-jQuery Blur Event Method Example
Recommended:-jQuery Focus () Event Method Example
Recommended:-jQuery Toggle Show Hide div on Click
Recommended:-jQuery Select Event Method
Recommended:-jQuery Get Selected Dropdown Option Value onchange
Recommended:-jQuery Form Submit On Button Click
Recommended:-jQuery Keydown Event Example
Recommended:-jQuery Detect ENTER key pressed
Recommended:-jQuery keyup() Event Method
Recommended:-jQuery MouseEnter Event Method