In this article we will explain how to use mouseleave() method in jquery or  how to execute a method when mouse cursor leaves from selected HTML element jQuery.


The jQuery mouseleave() function attach an event handler function to an HTML element. This function is executed, when the mouse pointer leaves from selected HTML element. When your mouse cursor leaves from selected HTML element, it executes the mouseleave() method attached with the event handler function to run.



jQuery mouseleave() example

Let's take an example to see the mouseleave() event in jQuery.

 <!DOCTYPE html>
<html xmlns="">
    <title>Jquery Tutorials</title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
        $(document).ready(function () {
            $("#h1").mouseleave(function () {
                $("div").text("Now you... leaving heading").show().fadeOut(2000);
    <h1 id="h1">Enter this heading.</h1>


In the above code when user try to leave the mouse from the “h1” element then

Now you... leaving headingtext is written inside “div” element.


 mouseleave jquery example 

I hope it will help to you after reading it.

 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like