jQuery Trigger Mouseleave on Element

jQuery trigger mouseleave on HTML element; Through this tutorial, i am going to show you how to use jQuery trigger mouseleave on html element

jQuery MouseLeave Event Method

The jQuery mouseleave() event is occurs when mouse pointer cursor leaves the selected Html element.

Syntax jQuery MouseLeave Event Method

$(selector).mouseleave() 

This triggers the mouseleave for the selected elements.

$(selector).mouseleave(function)  

Parameters of jQuery Mouseleave Event Method

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

Example 1 – jQuery Trigger Mouseleave on Element

<!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>    

Demo 1 – jQuery Trigger Mouseleave on Element


This is first heading.


Note that;- if you will cursor pointer on html elements and leave this selected html elements, the mouseleave event trigger and after appear this “Leave first heading” text.

Example 2 – How to change color of element on hover and remove it when mouseleave using jquery

<!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("color", "white"); 
        $("#second").css("background-color", "yellow");  
    });  
    $("#second").mouseleave(function(){  
        $("#second").css("color", "white"); 
        $("#second").css("background-color", "blue");  
    });  
});  
</script>  
</head>  
<body>  
<h4 id="second">Move your cursor over this statement.</h4>  
</body>  
</html>  

Demo 2 – How to change color of element on hover and remove it when mouseleave using jquery


Move your cursor over this statement.


Note that;- you will cursor pointer on html elements and leave this selected html elements, this event trigger and change the background color of heading text

Recommended jQuery Tutorial

Be First to Comment

Leave a Reply

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