How to change Background Color of Table Cell upon hover?

CSS – Change Background Color of Table Cell upon Hover

To change background color of the table cell when user hovers over the cell using mouse pointer, set the CSS background-color property with the required Color Value for the cell in table body with :hover selector.

The CSS code to set tbody td:hover selector, for table cells, with required background color value is showing in the following.

tbody td:hover {
  background-color: yellow;
}

Examples

1. Set background color of table cell to yellow on hover

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

index.html

Conclusion

In this CSS Tutorial, we learned how to use CSS :hover selector and background-color property to set a specific color for the table cell’s background when mouse is hovered upon it, with examples.