loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [ウェブデザイン] > 【CSS】リンク画像にマウスオーバーしたときCSSスプライトの背景画像ではなくimg画像でロールオーバーさせる
この記事は約2分で読めます。
この記事は最終更新日から5年以上経過しているため現状にそぐわない可能性もあります。

【CSS】リンク画像にマウスオーバーしたときCSSスプライトの背景画像ではなくimg画像でロールオーバーさせる

投稿日:2009.9.10

リンク画像にマウスオーバーした時に別の画像を表示させたい時
いつもなら”背景画像にリンクを設定して……というパターンがほとんどなんですが、
jQuery を使わず CSSのみで
『背景画像ではなく img画像そのものにマウスオーバーさせて別の画像をロールオーバー表示させる』という工夫を見つけたのでご紹介します。

SIRIUSレビューイメージ画像

手順

仮に用意した JPEG画像(100×50px)を<p></p>で挟みます。
そして適当なクラス名を振っておきます。
ここでは仮に 「class="change"」としておきました。

PNG 画像ではうまくいかないようなので使用の際は JPEG画像で。

次に CSSですが、考え方としては
『画像にマウスオーバーした際、元の画像が不可視になって a要素の背景画像が姿を現す』というもの。

ただしマウスオーバーして現れる画像は a要素の背景に指定するのではなく
pクラスそのものに指定します。

原理がちょっと難しいですが次のような感じになります。

a要素には”display: block;”を指定します。ただこれだけだと IE6でうまく表示されないので
ここでも幅と高さを指定します。

雑誌の記事などでは IE6用に「a:hoverの背景色に#FFFを指定すべし」と書いてあったりしますが、"#FFF"ではなぜかうまくいきませんでした。
そこはどうやら”transparent”(透明)にするのがいいみたいですね。

最後は『画像にマウスオーバーした際、元の imgは非表示にします』という命令文です。

これで(IE6を含めて)
リンク付き画像にマウスオーバーしたとき別の画像が表示されるようになります。

demo

マウスオーバー前の画像

以上です。

参照元:THE HAM MEDIA

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「AMORE (TCD028)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

先頭へ