jQuery hover() function fires when the mouse pointer enters and leaves the selected HTML element. jQuery hover function will attach two event handlers to execute when the mouse enters and leaves the element.

jQuery hover

The hover() method attaches handlers for mouse enter and mouse leave events.

The syntax for using hover():

  • hover(handlerIn, handlerOut)

handlerIn is a function to execute when the mouse enters the html element and handlerOut function executes when the mouse leaves the element.

Using this you can attach a single handler – handlerInOut that will execute with the mouse enter and mouse leave events. This function is shorthand for $( selector ).on( "mouseenter mouseleave", handlerInOut );.

jQuery hover example

Following example demonstrates jQuery hover() function usage.

In this example, you can see the hover() function is attached with two handlers – append() method is the function executed when you enter the element and it will append a <span> element. When you leave the element find() method finds the <span> element and it’s removed from the parent element, which is the <div> element in this example.

Below is the output of above HTML page, just hover over it and notice the jQuery hover function in action.

That’s all for a simple jQuery hover() function example, it’s a very useful method for creating great animation and effects.

By admin

Leave a Reply