Question

我在标签中有三个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>

我希望制作3个按钮，在悬停时将其不透明度更改为1，但最终不成功。首先，我将nav的不透明度声明为0.3，然后在悬停时将其不透明度设置为1。但它在悬停时保持为0.3。我想：悬停伪选择器更具特异性，所以它们会覆盖旧值，但它们没有。这是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;
}

如果您需要，我可以发布表明我的问题的图片。

Answer 1

导航的不透明度由孩子们继承。即使他们的1是1，他们也只会显示0.3不透明度。将孩子的不透明度定义为0.3。

Answer 2

只需为每个内部div创建一个泛型类，或者将CSS选择器更改为以下内容：

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

继承JSFiddle http://jsfiddle.net/rZgzL/

悬停时减少不透明度

2 个答案: