.hover() JQ Home  <<  Events  <<  .hover()

Mouse hover event handler.

Description

The .hover() method is used to bind two event handlers to The JavaScript hover event that activate when the mouse pointer enters or leaves the specified element.

  • The hover event is exactly the same as binding the .mouseenter() event to the specified element when only one handler is specified.
  • Use the .mouseenter() method if you only want to handle entering an element.
  • Use the .mouseleave() method if you only want to handle leaving an element.

Syntax

Signature Description
.hover( handlerIn( eventObject ) ,handlerOut( eventObject ) ) Bind an event handler to the hover JavaScript event for entering the specified element and an event handler to the hover JavaScript event for leaving the specified element.
.hover( handlerInOut( eventObject ) ) Bind an event handler to the hover JavaScript event for entering and leaving the specified element.

Parameters

Parameter Description Type
handlerIn( eventObject )A function to execute when the mouse pointer enters the element. Function
handlerOut( eventObject )A function to execute when the mouse pointer leaves the element. Function
handlerInOut( eventObject )A function to execute when the mouse pointer enters or leaves the element. Function

Return

A jQuery object.

.hover( handlerIn(eventObject) ,handlerOut(eventObject) )  Events  <<  Top

Bind an event handler to the hover JavaScript event for entering the specified element, optionally passing an event handler to the hover JavaScript event for leaving the specified element.

  • This signature is a shortcut for $(selector).mouseenter(handlerIn).mouseleave(handlerOut);.

In the example below when we hover over a 'td' element we change the background colour to olive. When we leave a 'td' element we change the background colour to orange.

Table For Testing The .hover( handlerIn(eventObject) ,handlerOut(eventObject) ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2 


$(function(){
  $('.testtable td').hover(
    function () {
      $(this).css('backgroundColor', 'olive');
    }, 
    
    function () {
      $(this).css('backgroundColor', 'orange');
    }
  );
});

.hover( handlerInOut(eventObject) )  Events  <<  Top

Bind an event handler to the hover JavaScript event for entering or leaving the specified element.

  • This signature is a shortcut for $(selector).mouseenter("mouseenter mouseleave", handlerInOut);.

In the example below when we enter or leave a 'td' element we change the background colour to green.

Table For Testing The .hover( handlerInOut(eventObject) ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2 


$(function(){
  $('.testtable2 td').hover(
    function () {
      $(this).css('backgroundColor', 'green');
    }
  );
});

Related Tutorials

jQuery Advanced Tutorials - Lesson 2 - Keyboard & Mouse Events