jQuery mouseout()

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>/*from   www.  ja  va 2  s. c  o  m*/
<script>
$(document).ready(function(){
  $("p").mouseover(function(){
    $("p").css("background-color", "yellow");
  });
  $("p").mouseout(function(){
    $("p").css("background-color", "lightgray");
  });
});
</script>
</head>
<body>

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

</body>
</html>

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

The mouseout() method triggers the mouseout event.

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

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

While the mouseleave event only triggers when the mouse pointer leaves the selected element.

Trigger the mouseout event for the selected elements: 

$(selector).mouseout()

Attach a function to the mouseout event: 

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



PreviousNext

Related