0

タグに 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;
}

必要に応じて、私の問題を示す画像を投稿できます。

4

2 に答える 2

0

内部 div ごとにジェネリック クラスを作成するか、CSS セレクターを次のように変更します。

nav > #home:hover,
nav > #about:hover,
nav > #contact:hover {
    opacity: 1;
}

JSFiddleはこちらhttp://jsfiddle.net/rZgzL/

于 2013-04-13T16:51:42.853 に答える