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