Learning jQuery Hover Event – .hover()

The jQuery Hover event – .hover() is fired whenever mouse pointer is placed over an element. The .hover() event triggers both mouseenter & mouseleave events.

Syntax of jQuery Hover Event

$(selector).hover(mouse-enter-function,mouse-leave-function)

mouse-enter-function – will execute when mouse enters the element. It’s a required function.
mouse-leave-function –will execute when mouse leaves the element. It’s optional function.

jQuery Hover Example

Here I will use both mouse enter & mouse leave functions to change the color of a p element on mouse hover event.

<p id="para2">Move mouse over me</p>
$("#para2").hover(function () {
    $(this).css("color", "orange")  ;
}, function () {
    $(this).css("color", "purple");
});

In the above code, when mouse is put over the p element the color changes to orange, and when move is removed from it the color changes to purple.

In this jQuery Hover Event I have used both mouse-enter-function & mouse-leave-function. First one sets color to orange and the second on set it to purple.

Using only one function on jQuery Hover

If I use only one function then the color of p element will remain orange when the mouse is removed from it.

$("#para2").hover(function () {
    $(this).css("color", "orange")  ;
});

DEMO DOWNLOAD