# 
## Overview
The **`mouseleave()` method** triggers the `mouseleave` event when the mouse pointer leaves a selected element. It is a short-hand of the  `on('mouseleave', eventHandler)` event.



## Syntax
```
$(selector).mouseleave(function());
```

## Parameters
This method accepts only one parameter, a `function` that gets invoked when the `mouseleave()` method triggers.

## Example
Let's look at the code below:

<html>
 <head>
 </head>
 <body>
   <h3>After entering, move the mouse pointer out of the square to change it's background color.</h3>
   <div id="content"/>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 </body>
</html>

$(document).ready(function() {
  // below method will be invoked
  // when mouse pointer leaves the content div
  $("#content").mouseleave(function() {
    // change background color
    $("#content").css("background-color", randomColor())
  });
});

const randomColor = function() {
  // generate a random color
  const color = Math.floor(Math.random()*16777215).toString(16);
  // return color
  return color;
}

#content {
    width: 100px;
    height: 100px;
    background: red;
}

codemirror

## Explanation
In the HTML tab:
* **Line 6**: We create a `div` `content`.
* **Line 7**: We import the `jQuery` script.

In the JavaScript tab:
* **Line 4**: We attach the `mouseleave()` method on the div `content`.
* **Line 6**: We use the `css()` method to change the background color of the `div` `content` when `mouseleave()` is invoked.
* **Lines 10 to 15**: We create a function that generates a random color and returns it.

## Output
* After we enter the square, the `mouseleave()` method is invoked when the mouse pointer leaves the square. As a result, the background color of the square changes.


What is the mouseleave() method in jQuery?

Triggers a mouseleave event when the pointer exits an element, invoking an event-based function.