1. TOPページに戻る
  2. CSS
  3. CSSで画像をロールオーバーする方法その2

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

  • 2008年01月27日

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に何も指定してとバグが発生するからです。