HOME > ウェブデザイン > 【CSS】リンク画像にマウスオーバーしたときCSSスプライトの背景画像ではなくimg画像でロールオーバーさせる
記事公開日:2009.9.10
この記事は約2分で読めます。
当ページのリンクにはプロモーションが含まれています。

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

この記事は最終更新日から10年以上経過しているため現状にそぐわない可能性もあります。

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

スポンサーリンク

スポンサーリンク

手順

仮に用意した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

マウスオーバー前の画像

以上です。

参考サイト

ワードプレス有料テーマの探し方画像

スポンサーリンク

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

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

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