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

1 つの CSS ルールを次のように変更します。

.silvergrad tr:hover td {

に

.silvergrad:hover td {

jsFiddle の例

trの子孫である要素はありません.silvergrad。silvergrad ですtr。_

于 2013-05-16T19:15:35.820 に答える
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

今では動作しますが、これは私が試した多くのバリエーションの 1 つです。私がしたのは変更することだけでした：

.silvergrad tr:hover td {

単純に

.silvergrad:hover {

そして今、それは美しく機能します。迅速に対応してくださった皆様、ありがとうございました。

于 2013-05-16T19:24:52.077 に答える