CSSによる背景画像のロールオーバー

メニューボタンが画像で、それをCSSの背景画像で制御してロールオーバーさせるやつ。よくあるあれ。仕事でもけっこう使うのに、毎回思い出すのにちょっと時間をロスっているのでメモ。

マウスのロールオーバーで切り替わる画像は同一の画像で作成。いわゆるCSS SPRITEというやつ。（実際のそれはもっとたくさんの画像を一つにしてるけど）背景画像の表示位置を変化させることでロールオーバー効果を得ている。
CSS

#globalNavi a{
    display: block; /* こうしてblock要素に指定しないとa要素は背景を表示しない */
    width: 108px; /* 背景画像と同じサイズを指定して表示領域の確保 */
    height: 40px;
    text-indent: -200px; /* テキストはマイナスインデントで表示領域外へ */
    overflow: hidden; /* 表示領域外のものはhidden */
}

#globalNavi a.home{
    background: url(/statics/pc/btnGlobalNaviHome.gif);
}

#globalNavi a:hover.home{
    background-position: 0 -40px;

}

(x)html

<ul id="globalNavi">

    <li><a href="#" title="ホーム" class="home">ホーム</a></li>

<#-- /globalNavi --></ul>