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，但我最终没有成功。首先，我将 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;
}

如果您愿意，我可以发布说明我的问题的图片。

Answer 1

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