.hover()S2C 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, optionally passing an event handler to the hover JavaScript event for 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

Return

A jQuery object.

.hover(handlerIn(eventObject)
      [,handlerOut(eventObject)]
Examplego to top of page 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');
    }
  );
});

go to home page Homepage go to top of page Top