jQuery Mouseleave Event Method Example

jQuery Mouseleave Event Method Example

jQuery mouseleave() event method; Through this tutorial, you will learn how to use mouseleave event with html elements.

jQuery Mouseleave Event Method

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

Examples of jQuery Mouseleave Event Method

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

Recommended jQuery Tutorials

  1. jQuery | Event MouseUp () By Example
  2. jQuery Event Mouseenter Example
  3. Event jQuery MouseOver() & MouseOut By Example
  4. keyup jquery event example
  5. Jquery Click() Event Method with E.g.
  6. Event jQuery. Blur By Example
  7. jQuery form submit event with example
  8. keydown function jQuery
  9. List of jQuery Events Handling Methods with examples
  10. Jquery Selector by .class | name | #id | Elements
  11. How to Get the Current Page URL in jQuery
  12. jQuery Ajax Get() Method Example
  13. get radio button checked value jquery by id, name, class
  14. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  15. jQuery Get Data Text, Id, Attribute Value By Example
  16. Set data attribute value jquery
  17. select multiple class in jquery
  18. How to Remove Attribute Of Html Elements In jQuery
  19. How to Checked Unchecked Checkbox Using jQuery
  20. jQuery removeClass & addClass On Button Click By E.g.

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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