How to highlight table row on hover using CSS only?

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>

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.


Yes, a row is possible but not a column.

tr:hover {
  background-color: lightyellow;
}

Tags:

Html

Css