mouseout()

The mouseout event is occurred when you remove your mouse cursor from the selected element .Once the mouseout event is occurred, it executes the mouseout() method or attach a function to run.

This event is generally used with mouseover () event.

Note: Most of the people are confused between mouseout and mouseleave.

Difference between mouseleave and mouseout

The mouseleave event is only triggered if the mouse pointer leaves the selected element whereas the mouseout event triggers if the mouse cursor leaves any child elements as well as the selected element.

Syntax:

snippet

$(selector).mouseout()

It triggers the mouseout event for selected elements.

snippet

$(selector).mouseout(function)

It adds a function to the mouseout event.

Parameters of jQuery mouseout() event

Parameter	Description
Function	It is an optional parameter. It executes itself when the mouseout event is triggered.

Example of jQuery mouseout() event

Let's take an example to demonstrate jQuery mouseout() event.

snippet

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").mouseover(function(){
        $("p").css("background-color", "lightgreen");
    });
    $("p").mouseout(function(){
        $("p").css("background-color", "orange");
      });
});
</script>
</head>
<body>
<p>Move your cursor over this paragraph.</p>
</body>
</html>

Output:

Move your cursor over this paragraph.

jQuery mouseout() event example 2

Let's see another example of jQuery mouseout() event.

snippet

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mouseover demo</title>
  <style>
  div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: lightgreen;
  }
  div.in {
    width: 60%;
    height: 60%;
    background-color: red;
    margin: 10px auto;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 <div class="out">
  <span style="padding:20px">move your mouse</span>
  <div class="in"></div>
</div>
<script>
$( "div.out" )
  .mouseover(function() {
    $( this ).find( "span" ).text( "mouse over " );
  })
  .mouseout(function() {
    $( this ).find( "span" ).text( "mouse out " );
  });
</script>
</body>
</html>

Output: