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:
$(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.
$(“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.
The code:
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hoverdemo").hover(function(){
$("#hoverdemo").removeClass( "OutCls" ).addClass( "Incls" );
},function(){
$("#hoverdemo").removeClass( "Incls" ).addClass( "OutCls" );
});
});
</script>
<style>
.OutCls
{
background: #D9534F;
width:220px;
border-radius: 15px;
padding:20px;
font-size:22px;
color:#fff;
}
.Incls{
background: #1A3C57;
width:220px;
border-radius: 15px;
padding:20px;
font-size:18px;
color:#fff;
}
</style>
</head>
<body>
<div class="OutCls" id="hoverdemo">A jQuery hover demo. Bring the mouse over this div to execute functions as mouse is in and out of this div!</div>
</body>
</html>
As the mouse pointer is brought in the div element, the following code executes:
$("#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 the 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 the hover method executes as you bring the 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 the 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:
$("#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 an 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.
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 executes the following code:
$(".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 is brought outside the menu item, the other function executes and removes that span from that menu item.
Complete code for this example
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(document).ready(function(){
$(".men_ex ul li a").hover(function(){
$( this).append( $( "<span> ***</span>" ) );
},function(){
$( this).find( "span:last" ).remove();
});
});
</script>
<style>
.men_ex{
border-radius:5px;
}
.men_ex ul {
width:185px;
list-style-type: none;
}
.men_ex ul li a{
text-decoration: none;
color: #fff;
padding: 10.5px 11px;
background-color: #2D662D;
display:block;
border-bottom:solid 1px #000;
}
span{
color:#F06487;
}
</style>
</head>
<body>
<h2>Bring mouse over menu to execute hover method</h2>
<div class="men_ex" id="mainmenu">
<ul>
<li><a href="">jQuery</a></li>
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">Bootstrap</a></li>
<li><a href="">JavaScript</a></li>
</ul>
</div>
</body>
</html>