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

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

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

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

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

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

これに対し、

のようにCSSを書きます。

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

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

簡単ですね!

コードの解説

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

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

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

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

 

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

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

 

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

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

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

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

まとめ

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

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

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA