The jQuery Hover event – .hover() is fired whenever mouse pointer is placed over an element. The .hover() event triggers both mouseenter & mouseleave events.
$(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.
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.
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") ; });
Share this article -