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

jQuery, CSS and HTML

<!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>

Bring mouse over the table data part. The background color and font color
properties will be changed as mouse is in and out

Product ID	Product Name	Product Quality	Product Quantity
1	Wheat	Good	200 Bags
2	Rice	Good	250 Bags
3	Sugar	Good	200 Bags