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

Question

何かを稼働させることに苦労して、すでにたくさんの場所を見てきました。

基本的には、いくつかのロールオーバー画像（通常の状態「左上」、ホバー状態「左下」、これらは現在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. 

今、私が達成しようとしているものを、私はそれらのいずれかを置くと、それらのすべてがロールオーバーさせることですので、「アーカイブ」私はホバー言う;以下は、「アーカイブをロールオーバーだろう、接触。 、about "

私はすでに次のように試してみましたが、うまくいきませんでした（不透明度の句は、私がやりたかったのとまったく同じでしたが、何らかの理由で「バックグラウンドポジション」では機能しないようです）：

#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

ohnno、

あなたは正しい軌道に乗っていたが、その特異性は、要件のために働いていません。このルートを行くお試しください：

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

それはまだ動作しない場合は、試してみてください！

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

最後に、あなたはまた、ルールを施行するために、ルールに重要適用される場合があります。 ！

#menu:hover li a { background-position: left bottom !important; opacity:0.5; } 

が特異の詳細については、W3Cでthis articleをチェックアウト：重要なのは、「これはあなたが考えることが何よりも優先されます」ブラウザに指示CSSのための特別なフラグが（ちょっと）.Hereは一例です。要するに、特異性はどのスタイルがいつ使用されるかを定義します。アプライドエレメントスタイルは、規則ごとに、適用可能な各スタイルの特異度が最も高いスタイルによって定義されます。

FuzzicalLogic

Answer 2

left-bottomが変更されていない可能性があります。試してみる？