1

我在表格中有一个渐变行，当鼠标悬停在该行中的任何单元格上时，我想更改整行的渐变。据我所知，我现在使用的 CSS 应该可以工作，但是鼠标悬停时没有任何反应（但原始渐变看起来很完美）。这是CSS：

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);
}

在 .silvergrad tr:hover 之后，我尝试过使用和不使用 td。这是该行的 HTML：

<tr class="silvergrad">
  <td>Some stuff</td>
  <td>Some stuff</td>
  <td>Some stuff</td>
</tr>

谁能看到我做错了什么？提前致谢。

4

5 回答 5

4

更改您的一个 CSS 规则：

.silvergrad tr:hover td {

至

.silvergrad:hover td {

jsFiddle 示例

没有任何tr元素是.silvergrad. silvergrad 是tr。_

于 2013-05-16T19:15:35.820 回答
2

您将表格行指定为具有 silvergrad 类的元素的后代，而它是具有 silvergrad 类的元素。尝试使用这个：

tr.silvergrad: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);
}
于 2013-05-16T19:15:14.933 回答
1

您的 CSS 正在寻找一个在具有tr该类的元素内.silvergrad的一个，而不是一个拥有它的元素。尝试这个：

tr.silvergrad:hover>td
于 2013-05-16T19:15:34.370 回答
0

也许它在变化，但你看不到。

请尝试使用渐变代码。

.silvergrad tr:hover>td{

 background-color: #999;
 background-image: -moz-linear-gradient(top, #999, #ccc);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#999), to(#ccc));
 background-image: -webkit-linear-gradient(top, #999, #ccc);
 background-image: -o-linear-gradient(top, #999, #ccc);
 background-image: linear-gradient(to bottom, #999, #ccc);
 background-repeat: repeat-x;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff999',endColorstr='#ffccc', GradientType=0);
}

请测试后回复:)

于 2013-05-16T19:22:18.163 回答
0

现在它起作用了，尽管我可以发誓这是我尝试过的众多变体之一。我所做的只是改变：

.silvergrad tr:hover td {

简单地

.silvergrad:hover {

现在它工作得很好。感谢所有这么快做出反应的人。

于 2013-05-16T19:24:52.077 回答