• RSS
  • Facebook
  • Twitter
  • Google+
  • Instagram
ホーム > CSS > CSSでtext-indentを使わずロールオーバーを表現する方法

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のユーザーは徐々に減りつつありますが、カバーしてあげれるところはしてあげたいですよね。

スパム判定を喰らうこともないし、これなら安心して使えそうです^^


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

NoFollow Plugin made by Web Hosting

This site uses Akismet to reduce spam. Learn how your comment data is processed.