css - 1つの画像CSSでメニューバースイッチの位置を作る

Question

ここで、いくつかの画像をメニューバー (ヘッダー内) に設定しようとしています。サンプル画像は次のとおりです。

アイデアは、ページの読み込み時に画像の上部のみが表示されることですが、画像がマウスでホバーされている場合、画像は下部のみに切り替わります。これはどのように可能ですか？これが私がやろうとしたことですが、うまくいきません：

.from
{
width: 100%;
list-style: none;
height: 63px;
}
.from:active, .from:hover
{
background-position: 0px -63px;
}
.from:current
{
background-position: 0px 0px -63px;
}

これを適切に行う方法はありますか？ul li タグよりも div タグの方が好ましいことに注意してください。ああ、話題から外れて、私はそれをTwitterのブートストラップに実装することも考えています。これを行うための良いアドバイスはありますか?

Answer 1

    .from .from-1 a.current
{
background-position: 0px 0px ;
}

px の 2 つのパラメーターを持つ背景位置。