如何仅使用 CSS 在悬停时突出显示表格行？

Question

是否可以仅使用 CSS（不使用 JavaScript）在悬停时突出显示表格行（类似这样）？

Answer 1

Yes, a row is possible but not a column.

tr:hover {
  background-color: lightyellow;
}

Answer 2

Yes it's possible but you have to worry about browser compatibility here is an example

<style type="text/css">
    .tbl {width: 640px;}
    .tbl tr {background-color: Blue; height: 24px}
    .tbl tr:hover {background-color: Red;}
</style>


<table class="tbl">
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
</table>

Answer 3

If you don't care about Internet Explorer, the :hover CSS pseudo-class works with any element.

If you do care about IE, you can find a workaround here .

Answer 4

<style type="text/css">
   tr.tr-hover-class:hover {
      background: grey !important;
   }
</style>

<table>
   <tr class='tr-hover-class'></tr>
</table>

Answer 5

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>

Answer 6

works with most browsers

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