各リスト項目ナビゲーションの背景画像が異なるか？

Question

ナビゲーション名に画像を使用し、ホバー上の各メニュー項目の画像を変更したいと思います。これを行うための最良の方法は何ですか？例が素晴らしいだろう。各リスト項目は、通常、アクティブ、マウスオーバーのための独自のイメージを持ちます。

メニュー名をマウスで押しているように見せようとしています。

Answer 1

私はあなたのためにアップ装備このjsfiddleを得ました。 background-imageプロパティと：hoverと：active CSSセレクタが関係します。あなたはそれらをhereで読むことができます。

パフォーマンスの理由から、個々の画像を使用する代わりに、spritesをお読みになることをおすすめします。

Answer 2

あなたは変更したい要素の後ろにカーソルを置きます。 私はコードを試していない非常に簡単な例でしたので、うまくいかない場合は申し訳ありませんが、あなたはドリフトを取得します。

HTML：

<ul> 
<li class="link1"><a>Link 1</a></li> 
<li class="link2"><a>Link 2</a></li> 
<ul> 

CSS：

li.link1 { 
background: url('img/link1_normal.png'); 
} 

li.link1:hover { 
background: url('img/link1_hover.png'); 
} 


li.link2 { 
background: url('img/link2_normal.png'); 
} 

li.link2:hover { 
background: url('img/link2_hover.png'); 
}