In this tutorial, learn how to highlight table row on hover mouse using CSS. Show table row background color on hover only to highlight the row. Add background color when someone hovers over the row of a table.

You can add more colors to the row of a table and display only when someone hovers. This can be useful when you highlight table row on hover rows. Change background color on hover and add a hover effect to each row of a table. You may also like to read how to highlight alternate table row color using CSS.

How to Highlight Table Row on hover mouse Using CSS

To perform this task, you have to use and add a background color to each row of a table using :hover. However, the CSS to add is not limited to the background only. Add as many CSS as you want and show an effect when someone hovers.

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 border without a hover method. Hover over each row of a table and see the background color only on hover. You can also apply a different background color to each row and display only on hover.

Hope, you like this tutorial of how to highlight table row on hover mouse using CSS. If you have any query regarding this tutorial, please let us know by commenting below.

Also, tell me which method are you using to apply the hover effect to the rows of a table.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.