Event jQuery Api Hover() By Example

Event jQuery Hover() – how to use hover event with html elements. We are going to show you with simple example how to use mouseleave event.

jQuery hover ()

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

$(selector).hover(inFunction,outFunction)   

Parameters

  • 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 Event hover()

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”.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *