web-dev-qa-db-ja.com

行内のセルにクラス名がある場合、CSSホバーが表の行で機能しないのはなぜですか？

私はこの問題で立ち往生しているので、どんな助けでもいただければ幸いです。複数行のテーブルがあります。行内の各セルは特定のクラスに属しています。これらのクラス名を使用してセルに色を付けています。

これが私のテーブルの行の例です。

<tr>
     <td class = "summarypage-odd-column">Theme</td>    <td class = "summarypage-odd-column">Q2 2009</td>   <td class = "summarypage-odd-column">Q1 2009</td>
     <td class = "summarypage-even-column">Theme</td>   <td class = "summarypage-even-column">Q2 2009</td>  <td class = "summarypage-even-column">Q1 2009</td>
     <td class = "summarypage-odd-column">Business Area</td>    <td class = "summarypage-odd-column">Q1 2009</td>   <td class = "summarypage-odd-column">Q1 2008</td>
 </tr>

ユーザーがマウスポインターをその行の任意のセルの上に移動すると、各行が強調表示されます。それを実現するために、次のCSSコードを使用しました。

tr:hover {
  background-color: #FFFAF0; color: #000;
}

残念ながら、各テーブルデータセルにクラス名があるため、ホバーが機能しません。しかし、データセルからクラス名を削除すると、ホバーが機能します。

私の質問は、行内にテーブルデータセルのクラス名を保持したまま、テーブル行でホバーを機能させる方法があるかどうかです。

csshtml-tablehover
21
Vicer

これを試して：

tr:hover td {
  background-color: #FFFAF0; color: #000;
}

安全のために、これを既存のtdスタイル宣言の後に配置します

58
Nick Craver

クラス名内のCSS命令は、<tr>命令よりも優先されます。

これを修正するには、CSS内でtd.summarypage-odd-column：hover、td.summarypage-even-column：hoverを使用します。

注：IE6を使用している場合、：hoverはリンクでのみ機能します（a：hoverなど）。

0
Sarhanis

td background-colorはtr background-colorを上書きすると思います。 @Nick Craverによって与えられた解決策は良いものです。
行の背景色ではなく、セルの背景色を変更する必要があります。

tr:hover td {
   ...
}
0
Luis Tark

間にスペースを入れないでください

tr:hover(space)td

私はスペースを与えていたので、それは私のために働いていました。

0
Saras Arya

これは私には起こりません。 影響があるかどうかを確認するときは、クラス名のみを追加/削除していることを確認し、tdsにそれらがないことを確認してくださいtrの背景を覆う独自の背景。

0
Matchu

おそらく重要な指定子を使用して、ホバースタイルがクラスで定義された背景をオーバーライドすることを確認する必要があります。

tr:hover { 
    background-color: #FFFFAF0 !important;
    color: #000 !important; 
}

興味深いことに、そのブラウザーはタグにホバーを適用するだけなので、これはIE6では機能しません。

0
BC.