CSSで1つの要素に複数classを設定して画像を入れ替える

2015/08/03

メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞれ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>

<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>

■その他

CSSパスを指定する際に半角スペースをあけると下位要素につながるのとは別に、つなげて書くと絞込み指定ができるみたい。知らんかった。

- CSS

: スマホサイトでviewportを指定しても横スクロールバーが表示される

スマホ用のサイトでviewportが指定されており、widthも100%になって ...

: LINE風のふきだしデザイン

LINE風のふきだしデザインでページを作ってほしいと言われた。 CSSはあまり理 ...

: formのsubmitをボタンを無くしたり画像をつけたりCSSで装飾

aタグになっていたところをsubmitボタンに変えてほしいという修正依頼があった ...

: CSSでスタイルの優先

1つのファイルに対して複数スタイルが指定されている、ということがたまにある。 ...

: 上部に固定されたヘッダーメニューの作成

■やりたい事ページスクロールしても上部に固定されたヘッダメニューの作る &nb ...

: cssのcontent

テキストが書かれているけど、firebugで要素を見ても書かれていない。かとい ...

: 可変要素内の文字を丸める

可変の要素内の文字を丸めたかった。いつもであればPHPのmb_strimwidt ...

: 固定ヘッダーメニュー

やりたかった事は、・6つぐらい異なるドメインのページがある・似たような用途な ...

: スマホ用の有料デザインテンプレが9月内は無料でもらえた

envatomarketでスマホ用の有料デザインテンプレートが2014年9月内に ...

: スクロールしても追尾する要素をCSSで作成

コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...

PREV: GoogleMapsAPIでマーカーが全て表示されるように自動ズーム
NEXT: PHPでプロキシ経由で他サーバーに接続

CSSで1つの要素に複数classを設定して画像を入れ替える

関連記事