.hover()

Syntax

.hover(handlerIn, handlerOut)

Parameters

handlerIn: A function to execute when the mouse pointer enters the element
handlerOut: A function to execute when the mouse pointer leaves the element

Return value

The jQuery object, for chaining purposes.

Description

Bind 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

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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>Hello</b>
    </body>
</html>

Click to view the demo

Hover to add and remove class

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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>header 1</div>
    </body>
</html>

Click to view the demo

Hover to hide tag

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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>header 1</h1></div>
    </body>
</html>

Click to view the demo

Hover to fade in and out

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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>header 1</h1></div>
    </body>
</html>

Click to view the demo

Whenever mouse cursor is moved over a matched element, the first specified function is fired.

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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

Home
JavaScript Book
jQuery

Event: