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.

Watch jQuery hover Method video tutorial on YouTube:

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 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.

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

This is the end of jQuery hover method tutorial.