css - CSS スプライトがスプライトを正しくロードしない

Question

作成中のメニューのスプライト シートを読み込もうとしていますが、一度に 1 つの画像を表示するのではなく、要素内のさまざまな位置にスプライト シート全体を表示します。

これは、2 つの画像を使用した私の CSS コードです。

#mymenu ul.menu > li > a.haschild
{
    background: #000 url("../images/right.png") no-repeat right center;
}
    #mymenu ul.menu > li:hover > a.haschild
    {
        background: #000 url("../images/right-hover.png") no-repeat right center;
    }

これは私がスプライトシートを使用しようとしたものです:

#mymenu ul.menu > li > a.haschild
{
    background: #000 url("../images/spritesheet.png") 0px 0px no-repeat right center;
}
    #mymenu ul.menu > li:hover > a.haschild
    {
        background: #000 url("../images/spritesheet.png") -6px 0px no-repeat right center;
    }

ただし、両方の画像を同時に表示します（スプライトシート全体）

私も試しました：

#mymenu ul.menu > li > a.haschild
{
    background: #000;
    background-image: url("../images/spritesheet.png") 0px 0px no-repeat right center;
}
    #mymenu ul.menu > li:hover > a.haschild
    {
        background: #000;
            background-image: url("../images/spritesheet.png") -6px 0px no-repeat right center;
    }

同じ結果...

私は何を間違っていますか？

編集

これは私のjsFiddleです:

http://jsfiddle.net/HKaSw/

Answer 1

次のように考える必要があります: 非常に大きな要素に背景画像を適用しています。CSS は背景画像がスプライトであることを知りません。他の背景画像と同じように背景画像を表示するだけです。あなたの場合、アイコンは画像上で互いに隣り合っているため、全体として表示されます。css を使用して背景画像の一部だけをトリミングすることはできないため、要素のサイズを考慮してスプライトに十分なパディングを含める必要があります (注意が必要なのは、さらに大きな要素でアイコンを使用する場合があるためです。不明)、またはアイコンの正確なサイズに適合する追加の要素をマークアップに含めてから、アイコン スプライトをそれらに追加します (より確実ですが、余分なマークアップは最悪です)。

コードの例を次に示します。無関係な CSS の一部を削除しました (さらに最適化できると確信していますが、ここではアイコンに取り組んでいます)。親メニュー項目とサブメニュー項目の両方でアイコン クラスを定義する必要はありません。アイコンクラスを再利用できます。それがCSSのポイントです！

a.haschild i {
  background: #000 url("http://www.grouctivity.com/menu/sprites.png") no-repeat 0 0;
}

a.haschild:hover i {
  background-position: -6px 0;
}

これは、追加のアイコン要素のデモを含む jsFiddle です: http://jsfiddle.net/HKaSw/2/

Answer 2

<a>代わりにタグに :hover を入れてみてください<li>