.hover()

Syntax and Description

.hover(handlerIn, handlerOut)

handlerIn is a function to execute when the mouse pointer enters the element. handlerOut is a function to execute when the mouse pointer leaves the element. Return value is the jQuery object, for chaining purposes.

jQuery .hover binds two handlers, to be executed when the mouse pointer enters and leaves the elements.

$obj.hover(handlerIn, handlerOut) is shorthand for:


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

Hover action

The following code adds hover action to a b tag.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--  w  w  w .  j  ava2s .c  o  m-->
              $("b").hover(function () {
                   $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
              }, function () {
                   var cssObj = {
                     'background-color' : '#ddd',
                     'font-weight' : '',
                     'color' : 'red'
                   }
                   $(this).css(cssObj);
              });
        });
    </script>
  </head>
  <body>
    <body>
      <b>java 2s.com</b>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.hover()

Hover to add and remove class

The following code listens to the hover event and adds/removes class for the target element. In this way we can change the color for mouse in and out event.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!-- w w  w. j a  va2s  .  c  o  m-->
             $("div").hover(
                  function () {
                    $(this).addClass("my");
                  },
                  function () {
                    $(this).removeClass("my");
                  }
             );
        });
    </script>
    <style>
  .my { color:blue; }
  </style>
  </head>
  <body>
    <body>
       <div>java 2s.com</div>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.hover()

Hover to hide tag

The following code uses hover action to add marker tag and hide the marker tag for mouse out.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!-- w  w  w .  jav a  2 s. c om-->
              $("div").hover(
                  function () {
                    $(this).append($("<span> ***</span>"));
                  }, 
                  function () {
                    $(this).find("span:last").remove();
                  }
             );
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>j ava 2s.com</h1></div>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.hover()

Hover to fade in and out

The following code add fade in and out animation for hover event.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from   www . j  a  v a2  s. c o m-->
              $("div").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>java2s.c o m</h1></div>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.hover()

Hover event for List

The following code adds hover event to a li element. It adds a marker tag for li element when mouse in.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from w ww .j  a va2  s  . c om-->
            $("li").hover(
              function () {
                $(this).append($("<span>*</span>"));
              }, 
              function () {
                $(this).find("span:last").remove();
              }
            );
        });
    </script>
  </head>
  <body>
    <body>
         <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
         </ul>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.hover()