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

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

手順

仮に用意したJPEG画像（100×50px）を<p></p>で挟みます。

そして適当なクラス名を振っておきます。

ここでは仮に 「class="change"」としておきました。

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

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

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

a要素には”display: block;”を指定します。

ただこれだけだとIE6でうまく表示されないのでここでも幅と高さを指定します。

雑誌の記事などではIE6用に「a:hoverの背景色に#FFFを指定すべし」と書いてあったりしますが、"#FFF"ではなぜかうまくいきませんでした。

そこはどうやら”transparent”（透明）にするのがいいみたいですね。

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

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

以上です。