マウスオーバー時にTABLEの行の背景色を変えるCSSの書き方

テーブルを使ってデータを一覧表示したとき、マウスカーソルがあたっている行だけを色を変えると見やすさが増しませんか？

CSSで簡単にできますので説明します。

マウスオーバー時にTABLEの行の背景色を変えるCSSの書き方

まずはテーブルを用意します。

<table id="table1" style="width: 100%;">
  <tbody>
    <tr>
      <th>ID</th>
      <th>名前</th>
      <th>性別</th>
      <th>生年月日</th>
      <th>好きな色</th>
      <th>好きな食べ物</th>
    </tr>
    <tr>
      <td>1</td>
      <td>あいうえお</td>
      <td>男性</td>
      <td>2001/1/1</td>
      <td>赤</td>
      <td>りんご</td>
    </tr>
    <tr>
      <td>2</td>
      <td>かきくけこ</td>
      <td>女性</td>
      <td>2002/2/2</td>
      <td>青</td>
      <td>みかん</td>
    </tr>
    <tr>
      <td>3</td>
      <td>さしすせそ</td>
      <td>女性</td>
      <td>2003/3/3</td>
      <td>黄色</td>
      <td>マグロ</td>
    </tr>
  </tbody>
</table>

ID	名前	性別	生年月日	好きな色	好きな食べ物
1	あいうえお	男性	2001/1/1	赤	りんご
2	かきくけこ	女性	2002/2/2	青	みかん
3	さしすせそ	女性	2003/3/3	黄色	マグロ

これに対し、

#table1 tr:hover td {
  background-color: #ffdaf8;
}

のようにCSSを書きます。

するとテーブルが次のように表示されます。

ID	名前	性別	生年月日	好きな色	好きな食べ物
1	あいうえお	男性	2001/1/1	赤	りんご
2	かきくけこ	女性	2002/2/2	青	みかん
3	さしすせそ	女性	2003/3/3	黄色	マグロ

簡単ですね！

コードの解説

今回はマウスがあたっているテーブルデータの行の色を変えるというものです。

行全体の色を変える必要があります。

とは言っても行を定義する tr タグに色を指定しても変わりません。（あれ？違ったかな？間違ってたらすみません。）

なので td タグの色を指定する必要があるのですね。

 

そしてマウスオーバー時かそうでないかは疑似クラスの hover を使います。

つまり tr タグに hover を指定して、その子要素の td タグの色を変えるように書かれているわけです。

#table1 tr:hover td {
  background-color: #ffdaf8;
}

 

ちなみによく間違うのが、次のように td タグに hover を指定してしまうことです。

#table1 tr td:hover {
  background-color: #ffdaf8;
}

こうするとマウスカーソルのあたっているセルだけの色が変わります。

そういう仕様の場合は使ってみてください。

ID	名前	性別	生年月日	好きな色	好きな食べ物
1	あいうえお	男性	2001/1/1	赤	りんご
2	かきくけこ	女性	2002/2/2	青	みかん
3	さしすせそ	女性	2003/3/3	黄色	マグロ

まとめ

マウスオーバー時に背景色などを変える場合はCSSの疑似クラス hover を使うと簡単。

データ行の色を指定する場合は td タグでなく、tr タグにhoverを指定する。