My HTML code includes a table like the following:
<table>
<tr class="myClass">
<td>John</td>
<td>Smith</td>
</tr>
</table>
I am trying to change the font color, background color, and use a pointer when the user hovers their mouse over any part of the row. I have tried the following CSS, but it is not working as expected:
tr.myClass:hover
{
cursor: pointer;
color: #1d5987;
background:#F0F8FF;
}
The code below does work, but it only changes the styling of the column that the cursor is on, instead of the entire row:
tr.myClass:hover>td:hover
{
cursor: pointer;
color: #1d5987;
background:#F0F8FF;
}
How can I make sure that the styling applies to the entire row when the user hovers over it? Thank you.
EDIT: The answers provided so far have not resolved my issue. It seems like the problem lies in the fact that when I inspect the elements using F12 while hovering over the row, only the specific row that the cursor is on gets highlighted, rather than all rows being highlighted.