jQuery Web Page Design Tutorials

jQuery hover and click Method Tutorial (Part 1)

Part 2 of jQuery hover and click method Tutorial

This jQuery tutorial provide a brief introduction how to use hover and click method. The tutorial covers how to display message when hove over an element, get the width and ID of elements being hoved over. This tutorial finally shows how to use click event.

jQuery Video Tutorial

Syntax of jQuery hover event

At first glance jQuery hover event is quite similar to mouseover event. The hover() method will triggers the mouseover event when the mouse pointer is over an element. Usually, a function will be run or binded when the hover event is triggered.

jQuery hover event

jQuery hover Event Example

The jQuery codes below will display a message in a Textarea field when mouse pointer hove over the cloud element.

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

var elementWidth = targetElement.width();

targetElement.hover(function() {
$("#outputText").css( {"color": "#090", "font-size": "16px" } ).text("The width is: " + elementWidth);
});

The result is:

jQuery hover method

jQuery hover to Get ID of Selected Element

With jQuery codes, the ID of hoved over element can easily be got. The following jQuery codes will get the ID of element being hoved over.

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

targetElement.hover(function() {

// Remember to write this code inside the function
var elementName = this.id;

$("#outputText").css( {"color": "#090", "font-size": "16px" } ).text("The name is: " + elementName);

});

The picture below shows that the ID of the cloud will be displayed when mouse pointer is over the selected element.

jQuery hover event