Learn jQuery hover method with CSS effects – 3 demos

The hover method in jQuery

The jQuery hover method binds two handlers as the mouse enters and leaves a specified element like a link, a paragraph, lists and others.

You may execute the code in those handlers like changing the background colors, fonts, adding text, or some other actions.

Syntax of using hover method

This is how you may use the $.hover method:

1	$(element).hover(function_handlerIn, function_handlerOut);

 

The handlerIn part will execute as the mouse is brought in the specified element. While the handlerOut executes as the mouse leaves the element.

To achieve the same result, you may use the $.mouseenter and $.mouseleave methods as well, e.g.

1	$(“div”).mouseenter( handlerIn ).mouseleave( handlerOut );

 

See the following examples to see hover method in action where I will add and remove CSS classes to change the look of specified elements; div, HTML table etc.

An example of hover jQuery with HTML div

To demonstrate the jQuery $.hover method, I have created a div element which is assigned a CSS class as the demo page loads. As you bring the mouse over that div, the hover method executes where two functions are attached. See the demo online which is followed by a little description.

See online demo and code

As the mouse pointer is brought in the div element, following code executes:

The first function executes as the mouse is in that div where current CSS class is removed by using the removeClass method and a new CSS class with different properties is added by using the addClass method of jQuery.

The second function in hover method executes as you bring mouse out of the div where the first CSS class is applied again.

An example of $.hover with HTML table to change CSS

In this example, an HTML table is created with CSS properties for table heading and data. The style is applied as demo page loads.

As you hover the mouse over the table data area, the hover method executes where instead of adding or removing a CSS class completely, I simply changed the background-color and text color properties by using the $.css method of jQuery.

See the demo online by clicking the link or image below:

See online demo and code

The following handlerIn and handerOut functions are executed inside the hover method:

The background color becomes darker with white text as the mouse is brought in while it comes back to default colors as the mouse is taken out of the table area.

A demo of hover with HTML list

In this example, an HTML list is created with a few list items. As you bring the mouse over the list items, a span tag is added with some text ahead of the current list item.

See online demo and code

As such, the <a> tag is used inside the <li> tag to create the links for each menu item. The <a> tag is referenced inside the hover method.

The hover method executes as you bring mouse over any link, that executed the following code:

In the first function, inside hover method, the <span> tag is appended with three ***. As the mouse pointer brought outside the menu item, the other function executes and removes that span from that menu item.