The mouseleave event occurs when the mouse pointer leaves the selected element.The mouseleave() method triggers the mouseleave event, or attaches a function to run when a mouseleave event occurs.
Syntex:-
$(selector).mouseleave()
|
Example :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color", "Green");
});
$("p").mouseleave(function(){
$("p").css("background-color", "yellow");
});
});
</script>
</head>
<body>
<p>Move the mouse pointer over paragraph text</p>
</body>
</html>
|
Example 2:-
<!DOCTYPE html>
<html>
<body>
<h1 id="demo1">Move Mouse pointer over me</h1>
<script>
document.getElementById("demo1").addEventListener("mouseenter", mouseEnter);
document.getElementById("demo1").addEventListener("mouseleave", mouseLeave);
function mouseEnter() {
document.getElementById("demo1").style.color = "red";
}
function mouseLeave() {
document.getElementById("demo1").style.color = "black";
}
</script>
</body>
</html>
|
