CSSで1つの要素に複数classを設定して画像を入れ替える方法
2024/02/25
メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞれCSSで指定したかった。通常時とマウスオーバー時は普通のbackground指定とhoverでいけたんだけど、アクティブ時に同一要素に複数classをつけるのはよいものの、どうCSSで指定したらよいのか分からなかった。以下に対応方法をメモ。
ソースコード
<style> #menu .test, #menu .test a { /* 通常時 */ background: url("test.jpg") no-repeat; } #menu .test.active, #menu .test.active a { /* アクティブ時。.test.activeはスペースをあけずにつなげて書く*/ background: url("test_active.jpg") no-repeat; } #menu .test a:hover { /* マウスオーバー時 */ background-image: url("test_hover.jpg") no-repeat; } </style> <div id="menu"> <div class="test active"> <a href="./link.html">link</a> </div> </div>
その他
CSSパスを指定する際に半角スペースをあけると下位要素につながるのとは別に、つなげて書くと絞込み指定ができるみたい。知らんかった。
関連記事
-
-
CSSとJavaScriptでテキストのコピー防止
あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...
-
-
Bootstrapよりも簡単でClassを付与する必要のないCSSフレームワーク「Simple.css」の利用方法
何らかのテストページを提出する際、見た目を整えるためBootstrapを使用した ...
-
-
「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法
「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...
-
-
IE11でSB Admin2のログインページの表示がおかしい
ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...
-
-
スマホサイトでviewportを指定しても横スクロールバーが表示される
スマホ用のサイトでviewportが指定されており、widthも100%になって ...