CSSで1つの要素に複数classを設定して画像を入れ替える
メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞれCSSで指定したかった。通常時とマウスオーバー時は普通のbackground指定とhoverでいけたんだけど、アクティブ時に同一要素に複数classをつけるのはよいものの、どうCSSで指定したらよいのか分からなかった。
調べてみると以下方法でいけた。
■ソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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で作成
コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...
-
-
CSSで一つの要素に対して複数の背景色を指定する方法
divの要素に対して複数の背景色をつけたかった。background-color ...
-
-
CSSでマウスカーソルの変更
マウスカーソルはCSSで任意に決められるみたい。 リンク時に一律させた方がよいと ...
-
-
ダウンロード無しで外部ファイル呼び出し
■jQuery http://scriptsrc.net/ ■bootstrap ...
-
-
CSSでプロパティの初期化
CSSでmedia screen and等を指定し、特定の場合のみプロパティの無 ...
-
-
ページング用CSS
div.pageNav { //これなくてもいいかも。 clear: both; ...
-
-
デザイン等のカラーの組み合わせを簡単に決める方法
サイト作成時にメインカラーとそれにマッチする組み合わせを考える必要があった。デザ ...
-
-
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...
-
-
CSSとJavaScriptでテキストのコピー防止
あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...
-
-
固定ヘッダーメニュー
やりたかった事は、 ・6つぐらい異なるドメインのページがある ・似たような用途な ...