Question

我在表格中有一个渐变行，当鼠标位于该行的任何单元格上时，我想更改整行的渐变。据我所知，我现在使用的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>

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

Answer 1

从以下位置更改您的一个CSS规则：

.silvergrad tr:hover td {

到

.silvergrad:hover td {

<强> jsFiddle example

没有tr元素是.silvergrad的后代。 silvergrad tr。

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

Answer 3

你的CSS正在寻找一个tr 里面的一个.silvergrad类的元素，而不是那个拥有它的人。试试这个：

tr.silvergrad:hover>td

Answer 4

也许它正在改变，但你无法看到。

请尝试使用渐变代码。

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

请在测试后回复：）

Answer 5

现在它可以工作，虽然我可以摆动这是我尝试的众多变化之一。我所做的就是改变：

.silvergrad tr:hover td {

简单地

.silvergrad:hover {

现在它工作得很漂亮。感谢所有回复如此迅速的人。

尝试获取整个表格行以在鼠标悬停时突出显示

5 个答案: