Windows XPでIE6をお使いの方はまずサンプルページを見てください。
CSSでのロールオーバーのサンプル
このロールオーバーはCSS界隈ではよく使われる手法で、実は
のような二つの画像を一つにくっつけたものをa要素の背景として使用し、その背景をbackground-positionを使って動かすことでロールオーバーの表現を実現しています。(参考:Junkline - XHTML1.1 + CSS で Preload いらずロールオーバー方法)
a { display: block ; width: 200px ; height: 100px ; text-indent: -9999px ; background: url(btn_sample.gif) no-repeat 0 0 transparent ; } a:link { background-position: 0 0 ; } a:hover { background-position: 0 -100px ; }
最後のa:hoverでカーソルが触れているときの指定をしています。つまりカーソルが触れたら背景を上方向に100pxズラしなさい、みたいな感じ。
さてここからが本題。これをWindows XPの最新のIE6で見るとチラチラするんです。画像の表示領域を切り替える際に、画像の向こう側が表示されてるっぽい…。以前のIE6ならこんなことなかったハズなのに。まずは自分で作ったページでこのことに気が付き、同じ手法を使っている別のサイトでも確認してみました。ガーン、やっぱりチラチラしてるよー。
正確にいつなのかは分かりませんが、つい最近のIEの更新によりCSSでのロールオーバーに対する挙動が変わったものと思われます。さて、どうしたモンかな?