# .hover()

Categories: Events > Mouse Events

## .hover( handlerIn(eventObject), handlerOut(eventObject) ) 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(eventObject), handlerOut(eventObject) )

  handlerIn(eventObject)A function to execute when the mouse pointer enters the element.

  handlerOut(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:

    $(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>
    <head>
      <style>
      ul { margin-left:20px; color:blue; }
      li { cursor:default; }
      span { color:red; }
    </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.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 with fade class
    $("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").unbind('mouseenter mouseleave');

## .hover( handlerInOut(eventObject) ) 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(eventObject) )

  handlerInOut(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:

    $(selector).bind("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.

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      ul { margin-left:20px; color:blue; }
      li { cursor:default; }
      li.active { background:black;color:white; }
      span { color:red; }
      </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.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: