Whatdoyouthink Whatdoyouthink - 2 months ago 10
CSS Question

Hover a specific cell and change background color and font color

I'm building a menu and using a table.

Two columns, one for the icon and a second for the text.

My question is how to fix, that on mouseover on the text cell the background changes?

I can use CSS hover action but it have effect on all cells, but the icon cells should be protected from hover action. How can I fix this?

Answer

You can use a CSS selector like this:

td:nth-child(2):hover {
    background-color: red;
}

I'm assuming your table looks like:

<table>
<tr><td>Icon</td><td>Text</td></tr>
<tr><td>Icon</td><td>Text</td></tr>
<tr><td>Icon</td><td>Text</td></tr>
</table>

Demo:

td:nth-child(2):hover {
  background-color: red;
}
<table>
  <tr>
    <td>Icon</td>
    <td>Text</td>
  </tr>
  <tr>
    <td>Icon</td>
    <td>Text</td>
  </tr>
  <tr>
    <td>Icon</td>
    <td>Text</td>
  </tr>
</table>