Last Updated on February 6, 2021 by Roshan Parihar
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<style> table{ border-collapse:collapse; } table tr td, th{ border:1px solid #ccc; padding:5px; } table tr:hover{ background: #f1f1f1; } </style> <table> <tr> <th>Sr. No.</th> <th>Name</th> <th>Country</th> <th>Highest Score</th> </tr> <tr> <td>1</td> <td>Virat Kohli</td> <td>India</td> <td>183</td> </tr> <tr> <td>2</td> <td>Rohit Sharma</td> <td>India</td> <td>264</td> </tr> <tr> <td>3</td> <td>Sachin Tendulkar</td> <td>India</td> <td>200*</td> </tr> <tr> <td>4</td> <td>Martin Guptil</td> <td>New Zealand</td> <td>237*</td> </tr> </table> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<style> table.table-evenodd{ border-collapse:collapse; } table.table-evenodd tr td, th{ border:1px solid #ccc; padding:5px; } table.table-evenodd tr:hover:nth-child(odd){ background: #ffc4c4; } table.table-evenodd tr:hover:nth-child(even){ background: #b2f8ff; } </style> <table class="table-evenodd"> <tr> <th>Sr. No.</th> <th>Name</th> <th>Country</th> <th>Highest Score</th> </tr> <tr> <td>1</td> <td>Virat Kohli</td> <td>India</td> <td>183</td> </tr> <tr> <td>2</td> <td>Rohit Sharma</td> <td>India</td> <td>264</td> </tr> <tr> <td>3</td> <td>Sachin Tendulkar</td> <td>India</td> <td>200*</td> </tr> <tr> <td>4</td> <td>Martin Guptil</td> <td>New Zealand</td> <td>237*</td> </tr> </table> |
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