jQuery trigger mouseleave on HTML element; Through this tutorial, i am going to show you how to use jQuery trigger mouseleave on html element
jQuery MouseLeave Event Method
The jQuery mouseleave() event is occurs when mouse pointer cursor leaves the selected Html element.
Syntax 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. |
Example 1 – jQuery Trigger Mouseleave on Element
<!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>
Demo 1 – jQuery Trigger Mouseleave on Element
This is first heading.
Note that;- if you will cursor pointer on html elements and leave this selected html elements, the mouseleave event trigger and after appear this “Leave first heading” text.
Example 2 – How to change color of element on hover and remove it when mouseleave using jquery
<!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("color", "white");
$("#second").css("background-color", "yellow");
});
$("#second").mouseleave(function(){
$("#second").css("color", "white");
$("#second").css("background-color", "blue");
});
});
</script>
</head>
<body>
<h4 id="second">Move your cursor over this statement.</h4>
</body>
</html>
Demo 2 – How to change color of element on hover and remove it when mouseleave using jquery
Move your cursor over this statement.
Note that;- you 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 Tutorial
Recommended:-How to Get Element by class, name, id in jQuery
Recommended:-jQuery Events List with Example
Recommended:-jQuery Click() Event Example
Recommended:-jQuery Blur Event Method Example
Recommended:-jQuery Focus () Event Method Example
Recommended:-jQuery Toggle Show Hide div on Click
Recommended:-jQuery Select Event Method
Recommended:-jQuery Get Selected Dropdown Option Value onchange
Recommended:-jQuery Form Submit On Button Click
Recommended:-jQuery Keydown Event Example
Recommended:-jQuery Detect ENTER key pressed
Recommended:-jQuery keyup() Event Method