How to change Text Color of Table Row upon hover?

Change Text Color of Table Row upon Hover

To change text color of the table row when user hovers over the row using mouse pointer, set the CSS color property with the required Color Value for the rows in table body.

The CSS code to set tbody tr:hover selector, for rows in table body, with required text color value is showing in the following.

tbody tr:hover {
  color: red;
}

Examples

1. Set text color of table row to red on hover

In the following example, we take a table with two columns, three rows, and set the row’s text color to red when user hovers over a table row.

index.html

Conclusion

In this CSS Tutorial, we learned how to use CSS :hover selector and color property to set a specific color for the content in table row, when mouse is hovered upon it, with examples.