Code has been added to clipboard!

jQuery .hover(): Set Event Handlers for mouseEnter and mouseLeave

Reading time 1 min
Published Jul 3, 2019
Updated Sep 30, 2019

jQuery hover: Main Tips

  • .hover() jQuery function sets actions for when the mouse is within an element.
  • It attaches an event handler specifying separate functions for both mouseEnter and mouseLeave events.

Usage of .hover()

The jQuery .hover() method can be seen as a shorthand for attaching both mouseenter and mouseleave event handlers to one element at once.

In the example below, the element changes color opacity as the cursor moves in and out of its borders:

jQuery .hover() specifies two functions: one for the mouseEnter event and one for the mouseLeave event. Thus, its syntax look like this:

$("selector").hover(mouseenterFunction, mouseleaveFunction)

Latest Udacity Coupon Found:



Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 30/01/2021
3176 People Used
Only 97 Left