# .hover()

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

## hover ( handlerIn(eventObject), handlerOut(eventObject) ) Returns: jQuery version added: 1.0

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

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

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

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:

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

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

## Examples:

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

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      ul {
        margin-left: 20px;
        color: blue;
      }
      li {
        cursor: default;
      }
      span {
        color: red;
      }

      </style>

      <script src="//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:

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

    $( "td" ).hover(
      function() {
        $( this ).addClass( "hover" );
      }, function() {
        $( this ).removeClass( "hover" );
      }
    );

#### Example: To unbind the above example use:

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

## hover ( handlerInOut(eventObject) ) Returns: jQuery version added: 1.4

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

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

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:

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

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

## Examples:

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

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      ul {
        margin-left: 20px;
        color: blue;
      }
      li {
        cursor: default;
      }
      li.active {
        background: black;
        color: white;
      }
      span {
        color:red;
      }

      </style>

      <script src="//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: