jQuery hover() Function: Add Hover Effect Examples

The jQuery hover() function can be used to perform both mouseenter and mouseleave events. The method can execute two different functions together when you take your mouse to the element or mouseout from the element.

Note: If you specify only a single function as an argument of the hover(), it will execute on both mouseenter and mouseout events.


The syntax of jQuery hover() Function is given below:-

$(selector).hover(inFunction, outFunction)

Description of the Parameters

The description of these parameters is given below.

Parameter Name Description
inFunction Specify the function to execute at the time when the mouseenter event occurs. Mandatory
outFunction Specify the function to execute at the time when the mouseout events occur. Optional

jQuery hover() Function Examples

Let’s see some useful examples of jQuery hover() function method.

Example 1: Change the Background on mouseenter and mouseout events

You can create a hover effect to change the background on mouse enter and mouse out. It requires to use the hover() within which you have to use the css() function of jQuery.


Hover me to see mouseenter and mouseout effects

The above example contains the text content. When you hover over the above text content, it will add a blue background with some padding to the text content. On mouseout, it changes the background color to yellow.

Example 2: Fade In and Fade Out on jQuery hover() Effect

If you want to fade in and fade out the <div> element on mouseenter and mouseout. It uses the fadeIn() and fadeIn() function of jQuery for the effect.


Name: Nick Wilson

Email: [email protected]

Mobile: 0123456789

The above example contains the button element and the div content. You have to hover over the above button to fade in and fade out the div element using jQuery.

You may also like to read

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.