jQuery hover() Method

jQuery hover() method bind one or two handlers, and it will run when the mouse pointer enters and leaves the selected elements.

This method triggers both the mouseenter() and mouseleave() events.

Syntax

This triggers the hover event on the selected elements.

$(selector).hover(handlerIn, handlerOut);
Parameter Type Description
handlerIn Function Required. Specifies the function to execute when the mouseenter event is occurs.
handlerOut Function Optional. Specifies the function to execute when the mouseleave event is occurs.

Examples

This example represents the hover() event.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery hover() method</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function(){
      $("div").hover(function(){
        $(this).css("background-color", "pink");
        }, function(){
        $(this).css("background-color", "white");
      });
    });
  </script>
</head>
<body>
  <p>Click on following text field to occur hover events.</p> 
  <div style="padding:15px 10px;">
    Name: <input type="text" name="name" />
  </div>
  <div style="padding:15px 10px;">
    E-mail: <input type="text" name="email" />
  </div>
  <div style="padding:15px 10px;">
    Phone: <input type="text" name="phone" />
  </div>
</body> 
</html>

Run it...   »