.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 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) )
Example 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.
$(function(){
$('.testtable td').hover(
function () {
$(this).css('backgroundColor', 'olive');
},
function () {
$(this).css('backgroundColor', 'orange');
}
);
});
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 |
.hover( handlerInOut(eventObject) )
Example 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.
$(function(){
$('.testtable2 td').hover(
function () {
$(this).css('backgroundColor', 'green');
}
);
});
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 |
Related Tutorials
jQuery Advanced Tutorials - Lesson 2 - Keyboard & Mouse Events