勉強したことのメモ

webプログラマが勉強したことのメモ。

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

   

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

  関連記事

CSSのセレクタを一瞬で拾ってくる

↓↓こちらのサイト様 http://css.miugle.info/ 左側のテキ ...

ダウンロード無しで外部ファイル呼び出し

■jQuery http://scriptsrc.net/ ■bootstrap ...

cssのcontent

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

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

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

firebugでCSSパスをコピー

要素を調査⇒右クリック⇒CSSパスをコピーできる。 jQueryでのセレクタ指定 ...

ページング用CSS

div.pageNav { //これなくてもいいかも。 clear: both; ...

CSSでセンターリング

<center></center>でセンターリングが出来 ...

CSSでプロパティの初期化

CSSでmedia screen and等を指定し、特定の場合のみプロパティの無 ...

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

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

CSSとJavaScriptでテキストのコピー防止

あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...