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

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

この問題で行き詰まっているので、助けていただけるとありがたいです。複数の行があるテーブルがあります。行内の各セルは特定のクラスに属しています。これらのクラス名を使用してセルに色を付けます。

以下は私のテーブルからの 1 つの行の例です。

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

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

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

ベストアンサー1

これを試して:

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

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

おすすめ記事