【CSS】 CSSだけでマウスオーバーして画像に色を付ける（RobGoodlatte.comの場合） 【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(/img/mutter/2008/10/21_01_02.gif) left top no-repeat;
text-indent: -9999px;
}

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

見出し



次にa:hoverに以下の設定をして、
マウスオーバー時に背景画像が切り替わるようにしてやればOK。
a:hover#sample_midashi {
background-position: 0 -34px;
}
見出し


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



なるほどねー。
October 21, 2008