お問い合わせはコチラから

【CSS】divの背景色をhoverで変更する指定

サイト運営

a要素やリスト要素などにマウスを乗せた時に背景色を変えるCSSをよく見かけます。

a:hoverやli:hoverといったCSSの記述はなじみがあります。

同じことを複数並んだdiv要素にclass指定付きで行おうとして、hoverの書き方が実はよくわかっていなかったので、メモしておきます。

そもそもhoverの書式は?

hoverの書式を調べてみますと、

セレクタ:hover { プロパティ:値; プロパティ:値; …; }

出典http://www.dspt.net/stylesheet_css/009/002.html

となっています。

hoverの前がセレクタとなっています。要素ではない点に注目しなければなりません。

セレクタということは、class名でもいいということです。

divにhoverを指定する例

以下のようなHTMLがあったときに、hogeというclassを持つdiv要素にマウスを乗せた時に背景色を変更するCSSはどうなるでしょうか?


<div>
<div class="hoge"></div>
<div class="hoge"></div>
<div class="hoge"></div>
<div class="hoge"></div>
</div>

次のようなCSSを書くことで、簡単にhogeをclassにもつdiv要素にhoverを指定できます。

要素のdivは必要なくて、セレクタのhogeだけでよいということです。

.hoge:hover{
backgroud : #333;
}

まとめ

hoverは使う機会が多いのですが、CSSのカスタマイズはいつもコピペで済ましているため、こんな時はどうするんだろう?と考えるときに応用が利きません。折に触れて原典にあたって基礎を確認しておくのは大事なことだと思います。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました