【CSS】テーブルをマウスオーバーすると行に色を付ける方法
2014-05-17 (土) 22:30 ウェブプログラミング
テーブルをマウスオーバーしたら行に色を付ける方法についてです。
このブログではツイッター分析シリーズなどに使っています。
方法
まず、テーブルタグにクラスまたはidを設定します。（ここではtbl-01のid）
<table id="tbl-01">～</table>
CSSでは次のようにします。
/* 背景色を指定 */
table#tbl-01 tr:hover {
background: #b2d8ff;
}
以上で完成です！
なお、上の場合は見出し行にthタグを設定している場合です。もしthタグを設定せずにすべてtrタグで行を表現している場合は、1行目を除く処理が必要です。次のようにします。
/* 背景色を指定（1行目以外の行） */
table#tbl-01 tr:not(:first-child):hover {
background: #b2d8ff;
}
↓この記事が参考になったら拍手（どなたでも可）、ツイート、いいね、はてブ、いずれかをお願いします。 今後のブログ作りに役立てたいので。
- 関連記事
