Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

## .hover( handlerIn, handlerOut )Returns: jQuery

Description: Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

- #### version added: 1.0.hover( handlerIn, handlerOut )

  - handlerIn
    Type: Function( Event eventObject )
    A function to execute when the mouse pointer enters the element.
  - handlerOut
    Type: Function( Event eventObject )
    A function to execute when the mouse pointer leaves the element.

The `.hover()` method binds handlers for both `mouseenter` and `mouseleave` events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

Calling `$( selector ).hover( handlerIn, handlerOut )` is shorthand for:

1 |
    $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

See the discussions for `.mouseenter()` and `.mouseleave()` for more details.

## Examples:

To add a special style to list items that are being hovered over, try:

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 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>hover demo</title>  <style>  ul {    margin-left: 20px;    color: blue;  }  li {    cursor: default;  }  span {    color: red;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body> <ul>  <li>Milk</li>  <li>Bread</li>  <li class="fade">Chips</li>  <li class="fade">Socks</li></ul> <script>$( "li" ).hover(  function() {    $( this ).append( $( "<span> ***</span>" ) );  }, function() {    $( this ).find( "span:last" ).remove();  }); $( "li.fade" ).hover(function() {  $( this ).fadeOut( 100 );  $( this ).fadeIn( 500 );});</script> </body></html>

#### Demo:

To add a special style to table cells that are being hovered over, try:

1 2 3 4 5 6 7 |
    $( "td" ).hover(  function() {    $( this ).addClass( "hover" );  }, function() {    $( this ).removeClass( "hover" );  });

To unbind the above example use:

1 |
    $( "td" ).off( "mouseenter mouseleave" );

## .hover( handlerInOut )Returns: jQuery

Description: Bind a single handler to the matched elements, to be executed when the mouse pointer enters or leaves the elements.

- #### version added: 1.4.hover( handlerInOut )

  - handlerInOut
    Type: Function( Event eventObject )
    A function to execute when the mouse pointer enters or leaves the element.

The `.hover()` method, when passed a single function, will execute that handler for both `mouseenter` and `mouseleave` events. This allows the user to use jQuery's various toggle methods within the handler or to respond differently within the handler depending on the `event.type`.

Calling `$(selector).hover(handlerInOut)` is shorthand for:

1 |
    $( selector ).on( "mouseenter mouseleave", handlerInOut );

See the discussions for `.mouseenter()` and `.mouseleave()` for more details.

## Example:

Slide the next sibling LI up or down on hover, and toggle a class.

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 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>hover demo</title>  <style>  ul {    margin-left: 20px;    color: blue;  }  li {    cursor: default;  }  li.active {    background: black;    color: white;  }  span {    color:red;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body> <ul>  <li>Milk</li>  <li>White</li>  <li>Carrots</li>  <li>Orange</li>  <li>Broccoli</li>  <li>Green</li></ul> <script>$( "li" )  .filter( ":odd" )    .hide()  .end()  .filter( ":even" )    .hover(function() {      $( this )        .toggleClass( "active" )        .next()          .stop( true, true )          .slideToggle();    });</script> </body></html>

#### Demo: