jQuery Hover Event Trigger Example

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

Be First to Comment

Leave a Reply

Your email address will not be published.