降低懸停不透明度

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，他們也只會顯示0.3的不透明度。將兒童的不透明度定義爲0.3。

Answer 2

只需創建一個通用類，使用每個內部的div或CSS選擇器更改爲類似這樣：

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

繼承人的的jsfiddle http://jsfiddle.net/rZgzL/