勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

   2024/02/25  CSS

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

  関連記事

LINE風のふきだしデザイン

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

画像ホバー時にエフェクトを追加したり文字を重ねられる「Izmir」ライブラリの利用方法

Lightboxを使用しているページで画像をクリックすると拡大表示されることをユ ...

「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法

「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...

スクロールしても追尾する要素をプラグイン等は利用せずCSSのみで作成する方法

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

CSSでfloatやmargin&widthは使わずにブロック要素の中央寄せ・右寄せする方法

CSSでブロック要素を中央寄せする場合はwidth指定しつつ「margin:0 ...