I'm attempting to create a gradient effect for an entire row in a table when the mouse hovers over any cell within that row. Despite using what I believe is the correct CSS code, nothing changes upon mouseover (even though the original gradient appears fine). Below is the CSS I am currently using:
td {
font-family: 'Roboto Slab', serif;
font-size: 18px;
padding: 3px 15px;
text-align: center;
}
.silvergrad {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF', endColorstr='#CCC');
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
background: -moz-linear-gradient(top, #FFF, #CCC);
}
.silvergrad tr:hover td {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999', endColorstr='#CCC');
background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#CCC));
background: -moz-linear-gradient(top, #999, #CCC);
}
I have experimented with and without the "td" selector after ".silvergrad tr:hover". Here is the HTML code for the row in question:
<tr class="silvergrad">
<td>Some stuff</td>
<td>Some stuff</td>
<td>Some stuff</td>
</tr>
If anyone can spot where I may be going wrong, I would greatly appreciate it. Thank you in advance.