How to highlight table row on hover using CSS only?

user_205270 0
Viewed 72512

Is it possible to highlight table row on hover (something like this) using CSS only (without JavaScript)?

css html
6 Answers

In this case you would add it to a table row using a stylesheet rule as in this CSS code example below:

    tr:hover {
      background-color: #ffff99;
    }

Full Example:

   .hoverTable{
  width:100%; 
  border-collapse:collapse; 
 }
 .hoverTable td{ 
  padding:7px; border:#4e95f4 1px solid;
 }
 /* Define the default color for all the table rows */
 .hoverTable tr{
  background: #b8d1f3;
 }
 /* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
          background-color: #ffff99;
    }
<table class="hoverTable">
 <tr>
  <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
 </tr>
 <tr>
  <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
 </tr>
 <tr>
  <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
 </tr>
</table>

user_42100650

works with most browsers

table tr:hover td {
  background: #efefef;
  cursor: pointer;
}
user_11318570
Related