【CSS】 CSSだけでマウスオーバーして画像に色を付ける（RobGoodlatte.comの場合）

デザインを色々と見ていて。
このページの右メニューのマウスオーバーに目鱗。

Passionless Pre-Professionals ? RobGoodlatte.com

トップページのメニューでも、マウスオーバーで色が変わるんだけどアレはFLASH。
エントリ内の右メニューではCSSのみで動いてる。

どうやってるかというと。

1. まず、見出し用画像を用意します。

まずは、こんな感じ。


まぁ適当です。
これを加工してマウスオーバー時の画像を作成して、
元ネタとこんな感じでくっつけます。

2. CSSを用意します。

常道として、まずテキストを配置した上でブロックの幅/高さを既定。
そこに背景画像を設定し、その後テキストをウィンドウの外へ飛ばします。

a#sample_midashi {
width: 300px;
height: 34px;
display: block;
background: url(/assets/2008/10/21_01_02.gif) left top no-repeat;
text-indent: -9999px;
}

これでアンカータグだけでボタンが完成。



a#sample_midashi_1 {
width: 300px;
height: 34px;
display: block;
background: url(/assets/2008/10/21_01_02.gif) left top no-repeat;
text-indent: -9999px;
}


見出し



次にa:hoverに以下の設定をして、
マウスオーバー時に背景画像が切り替わるようにしてやればOK。

a:hover#sample_midashi {
background-position: 0 -34px;
}

a#sample_midashi_2 {
width: 300px;
height: 34px;
display: block;
background: url(/assets/2008/10/21_01_02.gif) left top no-repeat;
text-indent: -9999px;
}
a:hover#sample_midashi_2 {
background-position: 0 -34px;
}


見出し


マウスオーバーの画像次第では動きも。


a#sample_midashi_3 {
width: 300px;
height: 34px;
display: block;
background: url(/assets/2008/10/21_01_03.gif) left top no-repeat;
text-indent: -9999px;
}
a:hover#sample_midashi_3 {
background-position: 0 -34px;
}


見出し



なるほどねー。