悬停对TR的TD的影响

Question

I have defined the following inside my css:-

 .mainTr {
       background-color:#78a22f;
       color:white;
   }
   .mainTr :hover{
       background-color: #C1D72E;
       color:#78a22f;
   }

and i have the following TR:-

 <tr class="mainTr">
                        <td><b>SPECIFICATIONS</b></td>
                        <td><b>FEATURES</b></td>
                    </tr>

but currently when i hover over a TR only on TD will got the new hover effect and for its text color while the background color will not be #C1D72E, also the other TD will keep rendering the defualt behavioure ..

Answer 1

I think u did not use table tag when u using tr and td tag example below:

html:

<table> 
<tr class="mainTr">
      <td><b>SPECIFICATIONS</b></td>
      <td><b>FEATURES</b></td>
</tr>
</table>

CSS:

.mainTr{
       background:#78a22f;
       color:white;
       padding:10px;
}
 .mainTr:hover{
       background-color:#C1D72E;
       color:#78a22f;
 }

jsfiddle https://jsfiddle.net/Grald/qd6c2zww/