How to Highlight Table Row on hover mouse Using CSS

In this tutorial, learn how to highlight table row on hover mouse using CSS. The short answer is: use the CSS :hover selector to apply an effect that displays on hover over the element.

It displays table row background color on hover to highlight the row when someone hovers over the row of a table. You can change the background color and show on hover that adds a hover effect to each row of a table.

Let’s find out the method with the examples given below.

How to Highlight Table Row on hover mouse Using CSS

To perform this task, you have to add a background color to each row of a table and display it on hover using :hover selector. However, the CSS is not limited to the background only as you can add as much CSS as you want and show an effect on hover. See the example below to learn the method:

Output

Sr. No. Name Country Highest Score
1 Virat Kohli India 183
2 Rohit Sharma India 264
3 Sachin Tendulkar India 200*
4 Martin Guptil New Zealand 237*

The above example contains 4 rows with each row contains different content. An added border and padding displays the border without a hover method. When you hover over the row of a table, you will see a background color starts appear only on hover.

The color is grey and you can also apply any other background color of your choice to each row of a table to display only on hover.

Highlight Table Rows with Different Colors

In addition to the above example, you can also highlight table rows with different colors on hover. You have to use the CSS selector :hover:nth-child(odd) and :hover:nth-child(even) for adding alternate colors to the table rows that display on hover as given below:

Output

Sr. No. Name Country Highest Score
1 Virat Kohli India 183
2 Rohit Sharma India 264
3 Sachin Tendulkar India 200*
4 Martin Guptil New Zealand 237*

When you mouseover the table rows given above, it shows the alternate colors to the alternate table rows that look beautiful.

I hope you like this tutorial on how to highlight table rows on hover mouse using CSS.

You May Also Like to Read