jQuery Web Page Design Tutorials

jQuery hover Method Tutorial

In previous jQuery tutorial, we show how to use the hover and mouseout event together. Actually the hover method can bind both mouseover event and mouseout event. This jQuery tutorial show how to do it.

jQuery Video Tutorial

Syntax of jQuery hover Method

The jQuery hover method is actually very interesting:

  1. The 1st function will be executed when mouse pointer move over the target element.

  2. The 2nd function will be executed when mouse pointer move out the target element.

The following diagram shows the syntax structure of jQuery hover method that bind functions to both mouseover and mouseout events.

jQuery hover event

jQuery hover Event Example

The jQuery codes below shows how to use hover method to bind functions to both mouseover and mouseout events.

// Declare a variable
var targetElement = $("#cloud");

targetElement.hover(

// Mouse Over Event
function() { $("#outputText").css( {"color": "#090", "font-size": "16px"} ).text("MOUSE is OVER!"); },

// Mouse Out Event
function() { $("#outputText").css( {"color": "red", "font-size": "14px"} ).text("MOUSE is OUT!"); }

);

When mouse pointer hove over the cloud element, the "MOUSE IS OVER" message will display on the TextArea field.

jQuery hover method

When mouse pointer leave the cloud element, the "MOUSE IS OUT" message will display on the TextArea field.

jQuery hover method

This is the end of jQuery hover method tutorial.