## .mouseout( handler )Returns: jQuery

Description: Bind an event handler to the "mouseout" JavaScript event, or trigger that event on an element.

- #### version added: 1.0.mouseout( handler )

  - handler
    Type: Function( Event eventObject )
    A function to execute each time the event is triggered.

- #### version added: 1.4.3.mouseout( [eventData ], handler )

  - eventData
    Type: Anything
    An object containing data that will be passed to the event handler.
  - handler
    Type: Function( Event eventObject )
    A function to execute each time the event is triggered.

- #### version added: 1.0.mouseout()

  - This signature does not accept any arguments.

This method is a shortcut for `.on( "mouseout", handler )` in the first two variation, and `.trigger( "mouseout" )` in the third.

The `mouseout` event is sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.

For example, consider the HTML:

1 2 3 4 5 6 7 8 9 10 |
    <div id="outer">  Outer  <div id="inner">    Inner  </div></div><div id="other">  Trigger the handler</div><div id="log"></div>

Figure 1 - Illustration of the rendered HTML

The event handler can be bound to any element:

1 2 3 |
    $( "#outer" ).mouseout(function() {  $( "#log" ).append( "Handler for .mouseout() called." );});

Now when the mouse pointer moves out of the `Outer` `<div>`, the message is appended to `<div id="log">`. To trigger the event manually, apply `.mouseout()` without an argument::

1 2 3 |
    $( "#other" ).click(function() {  $( "#outer" ).mouseout();});

After this code executes, clicks on `Trigger the handler` will also append the message.

This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves out of the `Inner` element in this example, a `mouseout` event will be sent to that, then trickle up to `Outer`. This can trigger the bound `mouseout` handler at inopportune times. See the discussion for `.mouseleave()` for a useful alternative.

### Additional Notes:

- As the `.mouseout()` method is just a shorthand for `.on( "mouseout", handler )`, detaching is possible using `.off( "mouseout" )`.

## Example:

Show the number of times mouseout and mouseleave events are triggered. `mouseout` fires when the pointer moves out of the child element as well, while `mouseleave` fires only when the pointer moves out of the bound element.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>mouseout demo</title>  <style>  div.out {    width: 40%;    height: 120px;    margin: 0 15px;    background-color: #d6edfc;    float: left;  }  div.in {    width: 60%;    height: 60%;    background-color: #fc0;    margin: 10px auto;  }  p {    line-height: 1em;    margin: 0;    padding: 0;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body> <div class="out overout">  <p>move your mouse</p>  <div class="in overout"><p>move your mouse</p><p>0</p></div>  <p>0</p></div> <div class="out enterleave">  <p>move your mouse</p>  <div class="in enterleave"><p>move your mouse</p><p>0</p></div>  <p>0</p></div> <script>var i = 0;$( "div.overout" )  .mouseout(function() {    $( "p:first", this ).text( "mouse out" );    $( "p:last", this ).text( ++i );  })  .mouseover(function() {    $( "p:first", this ).text( "mouse over" );  }); var n = 0;$( "div.enterleave" )  .on( "mouseenter", function() {    $( "p:first", this ).text( "mouse enter" );  })  .on( "mouseleave", function() {    $( "p:first", this ).text( "mouse leave" );    $( "p:last", this ).text( ++n );  });</script> </body></html>

#### Demo: