How to use JQuery Event mouseleave() Method
This article describe about jQuery Event mouseleave() Method.
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
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
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