jQuery Web Page Design Tutorials

jQuery hover and click Method Tutorial (Part 2)

Part 1 of jQuery hover and click method Tutorial

In previous jQuery tutorial, we got some basic idea how to use hover method. In this jQuery tutorial, we show how to use the click method.

Syntax of jQuery click event

The syntax of jQuery hover event is similar to hover event. The click() method will triggers the click event when an element is clicked. Same as the hover event, a function will be run or binded when the click event is triggered.

jQuery click event

jQuery click Event Example

The jQuery codes below will display the ID of selected element in a Textarea field when mouse pointer click on the cloud element. The message in the Textarea field will be removed when mouse leave the selected element.

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

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

targetElement.mouseout(function() {
$("#outputText").css( {"color": "red", "font-size": "14px" } ).text("");
});

The result is:

jQuery click event

This is the end of jQuery hover and click method tutorial.