html - html - li / ホバーで画像が変化する

Question

a:hover で変更される img src に関して非常に興味深い問題に遭遇しました。

スクリーンショット

ご覧のとおり、<a>セクターにカーソルを合わせると、論理的に白い画像が表示されません。だから私は黒と白で同じアイコンを持っていました.#menuのセクターをホバーしたいのですが、img srcはimgリンクを白ではなく黒のアイコンに変更します。

CSS+HTML: http://paste.laravel.com/KJ1

Answer 1

ul li a{
 background:#000000 url(/path/to/white/icon) left no-repeat;
 background-color:black;
}
ul li a:hover{
 background:#FFFFFF url(/path/to/black/icon) left no-repeat;
}

これを試してください

Answer 2

これには、背景画像のスプライトを使用できます。ここにスプライトに関する記事があります。

CSS の例:

ul li a{
   background: #000000 url('sprite.png') no-repeat;
}
ul li a:hover{
   background-color: #FFFFFF;
}

//then classes for each different link

ul li a.home {
   //white icon
   background-position: 0 0; 
}
ul li a.home:hover {
   //black icon
   background-position: 0 -20px;
}