Search code examples
htmlcsshtml-tablecss-tables

How an I change the color of a specific table cell when hovering on its row?

I'm trying to make my table data change color upon hovering over a table row. Is that possible? I tried searching everywhere, but none seems to match my description.

I want to only change the color of "Hello World" when I am hovering over the table row. So when i hover over anywhere in the table row, only that table data "Hello World" will change color.

table tr:hover {
  color: white
}
<table>
  <tbody>
    <tr>
      <td> Hello World </td>
      <td> Greetings </td>
    </tr>
  </tbody>
</table>

Solution

  • If you only want a specific cell to change upon hovering over any part of the table row, give that cell a class and use that in your selector:

    table tr:hover td.change{
  color: white
}
    <table>
  <tbody>
    <tr>
      <td class="change"> Hello World </td>
      <td> Greetings </td>
    </tr>
  </tbody>
</table>