jQuery $.hover Method with CSS Effects

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.

jQuery hover

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 headings 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 below:

A demo of jQuery $.hover method with HTML table to change CSS

Full code:

<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
 
<script>
$(document).ready(function(){
  $("#tbl").hover(function(){
        $(".demotblOut td").css({"background-color":"#93A8B7","color":"#fff"});
    },function(){
        $(".demotblOut td").css({"background-color":"#D6DEE4","color":"#002F5E"});
  });
});
 
</script>
 
<style>
.demotblOut {
    border-collapse: collapse;
    border: 1px solid #69899F;
  }
.demotblOut th{
    border: 2px solid #69899F;
    color: #fff;
    padding:10px;
    background-color:#4F6677;
  }
.demotblOut td{
    border: 1px dotted black;
    color: #002F5E;
    padding:15px;
    width:100px;
    background-color:#D6DEE4;
  }
  
span{
  background: #1A3C57;
  font-size:18px;
  color:#fff;   
}
</style> 
 
</head>
 
<body>
 
<span>Bring mouse over the table data part. The background color and font color <br>properties will be changed as mouse is in and out</span>
<p><table class="demotblOut" id="tbl">
  <tr>
      <th>Product ID</th>
      <th>Product Name</th>
      <th>Product Quality</th>
      <th>Product Quantity</th>
  </tr>
  <tr>
      <td>1</td>
      <td>Wheat</td>
      <td>Good</td>
      <td>200 Bags</td>
  </tr>
  <tr>
      <td>2</td>
      <td>Rice</td>
      <td>Good</td>
      <td>250 Bags</td>
  <tr>
      <td>3</td>
      <td>Sugar</td>
      <td>Good</td>
      <td>200 Bags</td>
  </tr>  
</table>
</p> 
</body>
 
</html>

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.

jQuery hover list

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 the mouse over any link, which 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 the 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>