CSS: Table row mouseover styles

This a lesson I learnt today.
My requirement: I have a table of data and I wanted to display a different background color when I move the mouse on any part of the row. So I defined seperate styles for the TR and TD tags. For the TR tag I also added onmouseover code to change the styleclass to a different one.

tr.datarow {background-color:white; color:black;}
tr.datarow-onmouseover {background-color:blue; color:white; cursor:hand; }

<tr onmouseover="this.className='datarow-onmouseover' " onmouseout= "this.className= 'datarow'" class="datarow"> 

Problem: Though the onmouseover is triggered when I move the mouse on the rows, it doesnt change the background color.
Solution: To change a property of TD on mouse over of TR then the property should not be overwritten in the TD styles. i.e. I 've defined a style for the TD tag also. And this style also contains background-color and color and properties. These are taking precedence over the TR properties.

In general, I think, in CSS if the parent and its child has same style property then overwriting the parents property does NOT overwrite the childs properties.