テーブルの行やセルにマウスカーソルが乗っているときにスタイルを変える

テーブルのセルにマウスが乗っているとき色を変える

テーブルの特定のセルにマウスカーソルが乗っているとき、その行のセル全体の背景色を変えたりすると、参照している情報を分かりやすく表示することができます。

マウスカーソルが乗っている時にCSSを適用するには、リンクと同様に擬似クラス「:hover」を使います。
下記のコードでは行に擬似クラスを使うことで、その行の子孫要素にあたる全てのtd要素の背景色が変わるように指定しています。

CSS コード例

.event_table tr:hover td {
  background-color: #d9efff;
}

HTML コード例

<table class="event_table">
  <thead>
    <tr>
      <th>ID</th>
      <th>イベント名</th>
      <th>定員</th>
      <th>開催日</th>
    </tr>
  </thead>
  <tr>
    <td>E080125</td>
    <td>Netflix鑑賞会</td>
    <td>10名</td>
    <td>18年8月20日</td>
  </tr>
  <tr>
    <td>E080126</td>
    <td>BBQ大会</td>
    <td>40名</td>
    <td>18年8月23日</td>
  </tr>
  <tr>
    <td>E080127</td>
    <td>読書会</td>
    <td>20名</td>
    <td>18年8月25日</td>
  </tr>
  <tr>
    <td>E080128</td>
    <td>プラネタリウム鑑賞会</td>
    <td>15名</td>
    <td>18年8月28日</td>
  </tr>
  <tr>
    <td>E080129</td>
    <td>第2回 Netflix鑑賞会</td>
    <td>10名</td>
    <td>18年8月30日</td>
  </tr>
  <tr>
    <td>E090130</td>
    <td>花火大会 (応募受付終了)</td>
    <td>20名</td>
    <td>18年9月7日</td>
  </tr>
  <tfoot>
    <tr>
      <td>E010001</td>
      <td>定例ミーティング</td>
      <td>-</td>
      <td>第1週の金曜夜</td>
    </tr>
  </tfoot>
</table>

個別のセルだけにスタイルを適用する

上記のコードでは行単位で指定していましたが、個別のセルに適用することも可能です。

先ほどは擬似クラス「:hover」をtr要素に指定していましたが、ここではtd要素に使います。

CSS コード例

.event_table tr td:hover {
  background-color: #d9efff;
}