CSSで画像をロールオーバーする方法その2

CSS

javascriptを使わずにCSSで画像をロールオーバーする方法第2弾。

背景にマウスがのった状態の画像を置いておき、のっていない状態の画像を普通にimg要素で表示させる方法

背景にマウスがのった状態の画像を置いておき、のっていない状態の画像を普通にimg要素で表示させる方法

まずはHTMLでマークアップします。

<p class="rollover2"><img src="画像ファイルの場所" alt="画像" width="画像の幅" height="画像の高さ"/>

これで普通に画像が表示されると思います。

そしてCSSでこう指定します。


p.rollOverOriginal2 img {
	border: 0;
	}

p.rollOverOriginal2 {
	width: 300px; /*--画像の幅--*/
	background-image: url(ロールオーバーの画像ファイル);
	}
	
p.rollOverOriginal2 a {
	display: block;
	}
	
p.rollOverOriginal2 a:hover {
	background-color: transparent; /*--IE用--*/
	}
	
p.rollOverOriginal2 a:hover img {
	visibility: hidden; /*--元の画像を消す--*/
	}

補足

p.rollover2 a:hoverにわざわざbackground-color: transparent;を指定してあるのは、IEではa:hoverに何も指定してとバグが発生するからです。