How to handle mouse over on a row of a table in html

Question

I have a table in html like:

<table>
   <tr class="myClass">
    <td>John</td>
    <td>Smith</td>
   </tr>
</table>

What I want is to change font color, background color and use a pointer when the user drives his mouse on the row, any point on the row. I am using below, but it is not working?

tr.myClass:hover
{
  cursor: pointer;
    color: #1d5987; 
    background:#F0F8FF;
}

The code below is working, but the changes are affecting the column the curser on instead all row.

tr.myClass:hover>td:hover 
{ 
    cursor: pointer;
    color: #1d5987; 
    background:#F0F8FF;
}

How can I make it? Thanks

EDIT: Answers are not helping. I think my main problem is that when I click F12 when drive my cursor on the row, only the row the curser on is getting highlighted, but all the row should be get highlighted.

Hmm, it's working in this jsfiddle: [hover on row](https://jsfiddle.net/jaspercreel/7b9kmb4q/). Is there anything in your environment messing with it, like another css rule? — James Hamann, May 09 '16 at 18:27
If the jsfiddles work for you but your html still doesnt work, please post more of your code because it might be that something else in your code contradicts the regular functionality — Jaqen H'ghar, May 09 '16 at 20:56
yes, something is weird and I dont know how to find it. There are thousands of css codes I cant post them all. Where should I check u think regarding this issue? — Emel Uras, May 09 '16 at 21:04
Try using F12 to compare between the JSFiddle's working table to your html's table and look for changes. Use the hover state in the F12 to see also what happens on hover in both tables. you can see where to open it [here](http://stackoverflow.com/questions/4515124/see-hover-state-in-chrome-developer-tools) — Jaqen H'ghar, May 09 '16 at 21:08

score 0 · Answer 1 · answered May 09 '16 at 18:30

0

Change your CSS code to below:

.myClass:hover
{ 
    cursor: pointer;
    color: #1d5987; 
    background:#F0F8FF;
}

Hope it helps.

answered May 09 '16 at 18:30

Mr.7

2,292
1
20
33

How to handle mouse over on a row of a table in html

1 Answers1