Event jQuery Mouseleave By Example

Event jQuery Mouseleave By Example

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

jQuery event mouseleave()

When your mouse cursor pointer leaves over the selected element, this triggers the mouseleave event and once the mouseleave event is occurred, this executes the mouseleave() method to attach the event handler function to run.

Syntax

$(selector).mouseleave() 

This triggers the mouseleave for the selected elements.

$(selector).mouseleave(function)  

Parameters

ParameterDescription
FunctionIt is an optional parameter. It executes itself when the mouseleave event is triggered.

Examples

Let’s see example1 of mouseleave() event.

<!DOCTYPE html>    
<html>    
<head>    
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
<script>    
$(document).ready(function(){    
    $("#first").mouseleave(function(){    
       $( "span" ).text( "Leave first heading" ).show().fadeOut( 2000 );   
    });    
});    
</script>    
</head>    
<body>    
<h1 id="first">This is first heading.</h1>   
<span></span>   
</body>    
</html>    

In this above example, When we will cursor pointer on html elements and leave this selected html elements, the mouseleave event trigger and after appear this “Leave first heading” text.

Example2 mouseleave() event.

Let’s see example2 of mouseleave event.

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>  
$(document).ready(function(){  
    $("#second").mouseenter(function(){  
        $("#second").css("background-color", "yellow");  
    });  
    $("#second").mouseleave(function(){  
        $("#second").css("background-color", "blue");  
    });  
});  
</script>  
</head>  
<body>  
<h4 id="second">Move your cursor over this statement.</h4>  
</body>  
</html>  

In this above mouseleave event example, When we will cursor pointer on html elements and leave this selected html elements, this event trigger and change the background color of heading text

Leave a Reply

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