【CSS】CSSのみでマウスオーバーしたテーブル行の背景色を変更する方法
2017/12/20
縦に十数行以上あるテーブルを組んだ時など、どこにカーソルがあるのかよく分からなくなることってあると思います。
その時に、マウスカーソルがある行の背景色を変更することにより、わかりやすくする小技。
今回はCSSのみで実現してみようと思います。
マウスオーバー時にテーブル行の背景色を変更
テーブル
単純なテーブルデータです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<table id="sample"> <tr> <td>セルA1</td><td>セルA2</td><td>セルA3</td> </tr> <tr> <td>セルB1</td><td>セルB2</td><td>セルB3</td> </tr> <tr> <td>セルC1</td><td>セルC2</td><td>セルC3</td> </tr> <tr> <td>セルD1</td><td>セルD2</td><td>セルD3</td> </tr> <tr> <td>セルE1</td><td>セルE2</td><td>セルE3</td> </tr> </table> |
CSS
|
1 2 3 |
table#sample tr:hover { background-color: #f9cccc; /* 行の背景色 */ } |
tr要素に :hover 疑似クラスを指定して、マウスオーバー時にセル（行単位）の背景色が変化するようにしています。
デモ
実際に動くデモはこちら。
| セルA1 | セルA2 | セルA3 |
| セルB1 | セルB2 | セルB3 |
| セルC1 | セルC2 | セルC3 |
| セルD1 | セルD2 | セルD3 |
| セルE1 | セルE2 | セルE3 |
よく考えたらこの技術って完全にPC用ですね。
スマホなどの場合は、タップした行の背景色が変更すればそれっぽくなるのでしょうか、、、？
[tgAmazonItemLookup asin="B002BH3GM4" related="1"]