何かを機能させるのに苦労しており、すでにたくさんの場所を見てきましたが、どんな助けも大歓迎です。
基本的に、いくつかのロールオーバー画像で構成されるナビゲーション メニューがあります (通常の状態の「左上」、ホバー状態の「左下」、現在、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.
今私が達成しようとしているのは、それらのいずれかにカーソルを合わせると、それらすべてがロールオーバーすることです。たとえば、「アーカイブ」にカーソルを合わせたとします。以下は「アーカイブ、連絡先、約」をロールオーバーします
私はすでに次のことを試しましたが、うまくいきませんでした（不透明句はまさに私がやりたかったことをしましたが、何らかの理由でこれは「背景位置」ではうまくいかないようです）：
#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}
これを達成するにはどうすればよいですか？助けてくれてありがとう！