これなら使う?cssスプライト

有名ブログみたいに、タイトルで釣れる様な感じにつけましたが・・・
私、CSSでマウスオーバー(ロールオーバー?)するのとかめんどいと思ってました。
なのでyuga.jsとかjQueryで今までは画像を変化させてました。

しかし今日このタグを見つけて、なるほどこれは簡単やんと思い直しました。
※ただし、この場合上下のみのCSSスプライト画像のロールオーバーのみ。サイトにある画像全部を1枚にしてCSSスプライトでやるのはめんどくさいと変わらず思ってます。

こんな感じで、上が普通の時、下がロールオーバー後の画像とくっついて作ってます。

↓そのCSSタグ

.nnnnnnnn{
    background: url("button.jpg") no-repeat top left;
    height: 00px;
    width: 000px;
}

.nnnnnnnn:hover {
    background-position: bottom left;
}

・・・どうすか?(笑

ポイントは、hoverの記述が1個で済みそうな所。
たとえば、liに1つ1つ違う画像の背景を入れるメニューとしても、hoverは1つで済みそう。

width(幅)は、画像の幅、height(高さ)は画像の上半分の高さにして
んで、通常は背景位置を top にしておいて、hover時に bottom にする。

CSSだけで済むなら、それにこしたことないし
私もこれならアリだなと思いました。