Question

在.GMDataRow td:hover我要更改该tr元素中每个td的背景颜色。这只能用CSS吗？我只尝试使用CSS，我不需要JQuery，JS解决方案。

<tr class="GMDataRow">
<td></td>
<td</td>
...
</tr>

Answer 1

试试这种方式

tr.GMDataRow:hover td{background:#ccc;}

Answer 2

Lalji建议的解决方案是完美的。

tr.GMDataRow:hover td{
      background-color:red;
}

tr.GMDataRow找到类＆＃34; GMDataRow＆＃34;在表行中。
tr.GMDataRow：hover将激活当前目标行的悬停css。
tr.GMDataRow：hover td将定位所有活动行的子列。

Answer 3

如果你想以不同的方式改变td背景，请尝试这个

HTML

<table style="width:100%">

    <tr class="GMDataRow">

        <td>ceva</td>

        <td>ceva</td>

        <td>ceva</td>

        <td>ceva</td>

    </tr>

</table>

CSS

.GMDataRow td:first-child:hover {
    background: yellow;
}

.GMDataRow td:nth-child(2):hover {
    background: pink;
}

.GMDataRow td:nth-child(3):hover {
    background: red;
}

.GMDataRow td:last-child:hover {
    background: blue;
}

另请查看http://www.w3schools.com/css/css_pseudo_classes.asp，或http://www.w3schools.com/cssref/sel_firstchild.asp这可能会帮助您更好地理解。

用tr父改变每个td的背景

3 个答案: