html - 降低悬停时的不透明度

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，但我最终没有成功。首先，我将导航的不透明度声明为 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;
}

如果你想要的话，我可以发布图片来说明我的问题。

Answer 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/