CSSテクニック - img要素を visibility プロパティでロールオーバー

以前紹介したロールオーバーでは、画像の切り替えの際にタイムラグがあったので、その問題を解消したCSSロールオーバーをご紹介します。

■サンプルロールオーバー

■サンプルXHTML

<a href=""><img src="images/sample_02.jpg" /></a>

■サンプルCSS

a {
    display: block;
    height: 41px;
    width: 156px;
    background: url(images/sample_02_r.jpg) 0px 0px no-repeat;
}

a:hover {
    background-color: #FFFFFF;
}

a:hover img {
    visibility: hidden;
}

まず、a要素をブロック化して幅と高さ、backgroundプロパティで背景に画像を指定します。（img要素の後ろにロールオーバー後の画像が用意してあるということです）

その次の、a:hover に対する background-color プロパティの背景色の指定はIE6のバグ
（:hover疑似クラスの子孫要素への指定が反応しない）を回避するための指定です。

最後に、visibility: hidden; で表示されていたimg画像を隠します。すると裏にあった背景が表示されてロールオーバーが完成します。

※visibilityプロパティの説明がしてあるサイト
http://www.htmq.com/style/visibility.shtml

トラックバック(1)