複数のクラス/idを調整するために：ホバーを取得する

Question

何かを働かせることに苦労していて、私はすでにたくさんの場所を見てきました、どんな助けでも大歓迎です。

基本的に私はいくつかのロールオーバー画像（通常の状態'left top'、ホバー状態'left bottom'）で構成されたnavメニューを持っていますが、現在はcssを介して個別にロールオーバーするよ:

<ul id="menu">
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="archives">Archives</a></li>
<li><a href="#" class="contact">Contact</a></li>
<li><a href="#" class="about">About</a></li>
</ul>

#menu {
list-style: none;
padding: 0;
margin: 0 auto;
height: 24.6em;
width: 79em;
position: relative;
}

#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}


#menu a:hover {
background-position: left bottom;}


#menu .home {
width: 520px;
height: 124px;
background: url(images/Home Menu.png) no-repeat;
left: 0px;
top: 122px;
}

#menu .archives {
width: 263px;
height: 57px;
background: url(images/Archives Menu.png) no-repeat;
left: 0px;
top: 189px;
}

and so on for the rest of the links.

今私が達成しようとしているのは、私がそれらのいずれかをホバーするときにそれらのすべてをロールオーバーさせることです。だから私は"アーカイブ"の上に浮かんだと言う;以下は、"アーカイブ、連絡先、約"をロールオーバーします

私はすでに次のことを試してみましたが、うまくいきませんでした（opacity句は私が望んでいたことを正確に行いましたが、何らかの理由でこれは"background-position":

#menu:hover .archives {background-position: left bottom; opacity: 0.5}
#menu:hover .contact {background-position: left bottom; opacity: 0.5}
#menu:hover .about {background-position: left bottom; opacity: 0.5} 

これを達成するにはどうすればよいですか？任意の助けを事前に感謝！

Answer 1

ああ、

あなたは正しい方向に進んでいましたが、特異性の要件のために機能していません。このルートを試してみてください： ジェネラコディセタグプレ

それでも機能しない場合は、次のことを試してください。 ジェネラコディセタグプレ

最後に、！importantをルールに適用して、ルールを適用することもできます。！importantは、CSSの特別なフラグであり、ブラウザに「これはあなたが考えていることをすべてオーバーライドします」（ちょっと）を伝えます。例を次に示します。 ジェネラコディセタグプレ

特異性の詳細については、この記事をご覧ください。W3C。つまり、特異性は、どのスタイルがいつ使用されるかを定義します。適用される要素のスタイルは、ルールごとに、適用される可能性のある各スタイルに対して最も高い特異性を持つスタイルによって定義されます。

FuzzicalLogic

Answer 2

left-bottom あなたが変化に気付かないように十分に変化していない可能性があります。右を試してみてください？