jQuery mouseleave() event method; In this tutorial, you will learn how to use mouseleave event with html elements for input, disable, add, trigger, send, and remove events into it.
jQuery Mouseleave Event Method with Example
The jQuery mouseleave event is a JavaScript event that is triggered when the mouse pointer leaves a specified HTML element. It is often used to detect when the mouse cursor moves out of an element’s boundaries. This event is particularly useful for implementing interactive features and behaviors on web pages.
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
| Parameter | Description |
|---|---|
| Function | It 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
- jQuery | Event MouseUp () By Example
- jQuery Event Mouseenter Example
- Event jQuery MouseOver() & MouseOut By Example
- keyup jquery event example
- Jquery Click() Event Method with E.g.
- Event jQuery. Blur By Example
- jQuery form submit event with example
- keydown function jQuery
- List of jQuery Events Handling Methods with examples
- Jquery Selector by .class | name | #id | Elements
- How to Get the Current Page URL in jQuery
- jQuery Ajax Get() Method Example
- get radio button checked value jquery by id, name, class
- jQuery Set & Get innerWidth & innerHeight Of Html Elements
- jQuery Get Data Text, Id, Attribute Value By Example
- Set data attribute value jquery
- select multiple class in jquery
- How to Remove Attribute Of Html Elements In jQuery
- How to Checked Unchecked Checkbox Using jQuery
- jQuery removeClass & addClass On Button Click By E.g.
