Learning jQuery Hover Event – .hover()

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


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

Next to read: Developers should also know the related method which is the jQuery scrolltop method.

jQuery Hover Example

Here I will use both mouse enter & mouse leave functions to change the color of a p element on the 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.

3 important jQuery methods:
1. jQuery val()
2. jQuery text()
3. jQuery html()

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")  ;

Check the link below:


Next to read: Developers should also know the related method which is the jQuery mousemove method.


  • linkedin
  • reddit


I hope you enjoyed reading this tutorial. If it helped you then consider buying a cup of coffee for me. This will help me in writing more such good tutorials for the readers. Thank you. Buy Me A Coffee donate