jQuery Tutorial Tutorials - jQuery .hover() method

The .hover() method in jQuery is used to excute a function when the mouse pointer enters and leaves the elements.

jQuery .hover() method Syntax

.hover(handlerIn,handlerOut)
.hover(handlerInOut)

jQuery .hover(handlerIn,handlerOut) method

Bind handlerIn and handlerOut to the matched elements.
when the mouse pointer enters the elements,handlerIn will be executed.
when the mouse pointer leaves the elements,handlerOut will be executed.

.hover(handlerIn,handlerOut) is shorthand for:
.mouseenter( handlerIn ).mouseleave( handlerOut );

example

Add class hover to the td cells when the mouse pointer enters it and remove the class when the mouse pointer leaves it.

$( "td" ).hover(
  function() {
    $( this ).addClass( "hover" );
  }, function() {
    $( this ).removeClass( "hover" );
  }
);

Try now

jQuery .hover(handlerInOut) method Example

Bind handlerInOut function to the matched elements, It would be executed when the mouse pointer enters or leaves the elements.

example

Change the div's background color when it is hovered over.

$("#block").hover( function () { 
    $(this).toggleClass( "highlight" );
    // return `false` to prevent the default right click action
    return false;
});

Try now