1

これがスプライトメニューの「通常の」コードです

#menu li a
{
    background:url('../layout/menu.jpg') no-repeat;
    display:block;
    text-decoration: none;
    width:100%; height:100%; 
}

#menu li.m1 a{ background-position:0px 0px; }
#menu li.m1 a:hover{ background-position:0px -55px; }
#menu li.m1 a.selected{ background-position:0px -55px; }

私は6つの異なるアイテムを持っています、それはホバーのために6つの異なるクラスx3を必要とします

これは、jQueryを使用して2〜3行で簡単に実行できますが、そのような単純なもののためにライブラリをロードする必要があります...それが価値があるかどうかはわかりません...

したがって、jQueryメソッドを使用するか、必要な数のcssルールをコピーして貼り付けます。

何度も何度も物を作るだけで、もっと良い方法があるように私に物を作ってください！

4

2 に答える 2

3

CSSを使用し、IDの代わりにクラスを使用します。次に、複製する必要はありません。

.menu li a
{
    background:url('../layout/menu.jpg') no-repeat;
    display:block;
    text-decoration: none;
    width:100%; height:100%; 
}

.menu li.m1 a{ background-position:0px 0px; }
.menu li.m1 a:hover{ background-position:0px -55px; }
.menu li.m1 a.selected{ background-position:0px -55px; }
于 2010-09-03T17:41:22.600 に答える
0

@GenericTypeTeaはここで正しい答えを持っています。しかし、あなたはあなたのcssを1つ、多分2行だけ小さくすることができます

a ）組み合わせ.menu li.m1 a:hoverて.menu li.m1 a.selected

.menu li.m1 a:hover, .menu li.m1 a.selected{ background-position:0px -55px; }

と

b）おそらく削除する.menu li.m1 a{ background-position:0px 0px; }

.m1menuの唯一のクラスであり、0 0がデフォルトの位置であると仮定すると、backgroundこの行が不要になる可能性があります。

于 2011-09-30T03:35:11.583 に答える