Eyecatch html css

HTML,CSS

【CSS】CSSのみでマウスオーバーしたテーブル行の背景色を変更してみる。

2015/01/24

縦に十数行以上あるテーブルを組んだ時など、どこにカーソルがあるのかよく分からなくなることってあると思います。
その時に、マウスカーソルがある行の背景色を変更することにより、わかりやすくする小技。
今回はCSSのみで実現してみようと思います。

マウスオーバー時にテーブル行の背景色を変更する

テーブル

CSS指定

tr要素に :hover 疑似クラスを指定して、マウスオーバー時にセル(行単位)の背景色が変化するようにしています。

デモ

セルA1セルA2セルA3
セルB1セルB2セルB3
セルC1セルC2セルC3
セルD1セルD2セルD3
セルE1セルE2セルE3

-HTML,CSS
-, , , , ,