CSSでtext-indentを使わずロールオーバーを表現する方法
CSSでボタンなどを作成する時、text-indentでテキストを飛ばし、背景画像のpositionの値を変えてロールオーバーを実現させることがよくあります。
しかし、これは正しく使わないといわゆる「スパム」の一種と捉えられることもあり、注意が必要です。
そこで、text-indentを使わずにロールオーバーを実装する方法を紹介します。
<div> <a href="http://hogehoge.com/"> <img alt="ボタン" src="01.gif" width="240px" height="280px" border="0" /> </a> </div>
a{
/* ボタンサイズ */
width:240px;
height:140px;
display:block;
/* 通常時とマウスオーバー時のボタンイメージを含んだ画像のため */
overflow:hidden;
/* マウスオーバー時のイメージを表示 */
background:url(01.gif) 0 -140px no-repeat;
border:0;
}
/* IE6対策 */
a:hover {
background-color:#FFFFFF;
}
/* マウスオーバー時にimgを非表示に */
a:hover img {
visibility:hidden;
}
aの背景画像にマウスオーバー時の画像を表示させておき、imgは通常時の画像を設置。
マウスオーバーしたら、imgを非表示にしてaの背景画像を見せる、というものです。
ここで重要なのが14行目の部分。
IE6はhover疑似クラスと子孫セレクタを組み合わせた場合、反応しないというバグがあります。
これはa:hoverに背景色（何色でもOK）を指定することで、回避できます。
IE6のユーザーは徐々に減りつつありますが、カバーしてあげれるところはしてあげたいですよね。
スパム判定を喰らうこともないし、これなら安心して使えそうです＾＾
コメントを残す