How to use JQuery Event mouseleave() Method

This article describe about jQuery Event mouseleave() Method.
  • 2188

jQuery Event mouseleave() Method

When the mouse pointer leaves an element. The mouseleave event generate.

And used this event with the mouseenter event togerther.

The mouseleave() method triggers the mouseleave event, it is also define what will happens when mouseleave event occurs.

Example

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("p").mouseenter(function () {

            $("p").css("background-color", "Red");

        });

        $("p").mouseleave(function () {

            $("p").css("background-color", "Gray");

        });

    });

</script>

</head>

<body>

<p style="background-color:Gray">The mouse pointer over this paragraph then hover</p>

</body>

</html>

 

Output

 

mouseleave method pic49.jpg

 

Trigger the mouseleave Event

It is generate trigger for the selected element.

 

Example

 

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("p").mouseenter(function () {

            $("p").css("background-color", "Red");

        });

        $("p").mouseleave(function () {

            $("p").css("background-color", "Gray");

        });

        $("#btn1").click(function () {

            $("p").mouseenter();

        });

        $("#btn2").click(function () {

            $("p").mouseleave();

        });

    });

</script>

</head>

<body>

<p style="background-color:Gray">The mouse pointer over this paragraph then hover.</p>

<button id="btn1">mouseenter event Activate for the paragraph</button><br />

<button id="btn2">mouseleave event Activate for the paragraph</button>

</body>

</html>

 

 

Output

 

mouseleave method pic50.jpg

 

Note: The above shown output is after the click on the Activate mousleave event button.

Bind a Function to the mouseleave Event

It is define a function to run when mouseleave event generate the trigger for specific element.

 

Syntax

 

$(selector).mouseleave(function)

You may also want to read these related articles Click here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.