I am trying to highlight the entire row of my table when user hovers over it. But only the TD changes background color instead of the entire row.
CSS:
.addItem_tr :hover{
background: blue;
}
Html
<table>
<thead>
<tr>
<th width="15%" ></th>
<th width="35%" ></th>
<th width="50%" ></th>
</tr>
</thead>
<tbody>
<tr className="addItem_tr">
<td className="td_add_serviced_item" >{item.quantity}</td>
<td className="td_add_serviced_item" >{item.productID}</td>
<td className="td_add_serviced_item" >{item.productInfo.productDescription}</td>
</tr>
<tr className="addItem_tr">
<td className="td_add_serviced_item" >{item.quantity}</td>
<td className="td_add_serviced_item" >{item.productID}</td>
<td className="td_add_serviced_item" >{item.productInfo.productDescription}</td>
</tr>
</tbody>
</table>
