jQuery mouseleave()

Introduction

Set the background color to gray, when the mouse pointer leaves a <p> element:

View in separate window 

<!DOCTYPE html>
<html>
<head>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>/*ww  w.  ja  va 2  s . c o  m*/
<script>
$(document).ready(function(){
  $("p").mouseenter(function(){
    $("p").css("background-color", "yellow");
  });
  $("p").mouseleave(function(){
    $("p").css("background-color", "lightgray");
  });
});
</script>
</head>
<body>

<p>Move the mouse pointer over this paragraph.</p>

</body>
</html>

The mouseleave event occurs when the mouse pointer leaves the selected element.

The mouseleave() method triggers the mouseleave event.

The mouseleave() method can also run a function when a mouseleave event occurs.

The mouseleave event only triggers when the mouse pointer leaves the selected elements.

While the mouseout event is triggered if a mouse pointer leaves any child elements and the selected element.

Trigger the mouseleave event for the selected elements: 

$(selector).mouseleave()

Attach a function to the mouseleave event: 

$(selector).mouseleave(function)
Parameter Optional Description
function Optional.function to run when the mouseleave event is triggered



PreviousNext

Related