.hover()

In this chapter you will learn:

Syntax and Description for .hover() event
How to add hover action to element
How to use hover action to add and remove class
How to use hover action to hide tag
How to use hover to fade in and out
How to use hover event with lists

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><!--from  ja  va  2  s  .c om-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("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

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><!--from j  a v a  2 s . c o m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("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

Hover to hide tag

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

<html><!--from  ja v a  2s  .  c o  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("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

Hover to fade in and out

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

<html><!--from   ja  v a 2s.  co  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("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

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><!-- j a  va 2  s.c  o  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("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

Next chapter...

What you will learn in the next chapter: