タグに 3 つの div があります。
<nav>
<div id="home">
<p>Home</p>
</div>
<div id="about">
<p>About Me</p>
</div>
<div id="contact">
<p>Contact</p>
</div>
</nav>
ホバーすると不透明度が 1 に変わる 3 つのボタンを作成したいのですが、うまくいきません。最初に、nav の不透明度を 0.3 として宣言し、ホバー時に不透明度を 1 に設定しました。ただし、ホバリングすると0.3のままです。:hover 疑似セレクターはより具体的であるため、古い値を上書きすると思いましたが、そうではありませんでした。CSSコードは次のとおりです。
#home, #about, #contact {
text-align: center;
color: #eedd33;
display: inherit;
padding-top: 0px;
font-family: Tahoma;
border-right: solid 1px black;
height: 50px;
vertical-align: middle;
padding: 10px;
}
#home:hover, #about:hover, #contact:hover {
opacity: 1;
}
nav {
border: solid 2px black;
display: inline-block;
background: orange;
border-radius: 7px;
opacity: 0.3;
}
必要に応じて、私の問題を示す画像を投稿できます。