jQuery hover and click Method Tutorial (Part 1)
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.
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 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 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.
