.hover() | jQuery API Documentation

.hover()

Categories: Deprecated > Deprecated 3.3 | Events > Mouse Events
Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

Contents:

.hover( handlerIn, handlerOut )Returns: jQueryversion deprecated: 3.3

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

This API is deprecated. Use .on( "mouseenter", handlerIn ).on( "mouseleave", handlerOut ) instead.

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 ).on( "mouseenter", handlerIn ).on( "mouseleave", handlerOut );

See the discussions for mouseenter and mouseleave for more details.

Examples:

Example 1



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-3.7.1.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 2

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" );
  }
);

Example 3

To unbind the above example use:

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

.hover( handlerInOut )Returns: jQueryversion deprecated: 3.3

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

This API is deprecated. Use .on( "mouseenter mouseleave", handlerInOut ) instead.

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-3.7.1.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" )
  .odd()
    .hide()
  .end()
  .even()
    .hover(function() {
      $( this )
        .toggleClass( "active" )
        .next()
          .stop( true, true )
          .slideToggle();
    });
</script>
 
</body>
</html>

Demo: