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:
1 2 3 4 5 6 7 8 9 |
$("#hoverdemo").hover(function(){ $("#hoverdemo").removeClass( "OutCls" ).addClass( "Incls" ); },function(){ $("#hoverdemo").removeClass( "Incls" ).addClass( "OutCls" ); }); |
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:
1 2 3 4 5 6 7 8 9 |
$("#tbl").hover(function(){ $(".demotblOut td").css({"background-color":"#93A8B7","color":"#fff"}); },function(){ $(".demotblOut td").css({"background-color":"#D6DEE4","color":"#002F5E"}); }); |
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:
1 2 3 4 5 6 7 8 9 |
$(".men_ex ul li a").hover(function(){ $( this).append( $( "<span> ***</span>" ) ); },function(){ $( this).find( "span:last" ).remove(); }); |
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.