懸停在子項上的不透明度轉換

我試圖在父級懸停時使子元素轉換不透明度的外觀。有人可以向我解釋爲什麼這不起作用，我相信這是一個重複的問題，但我似乎無法適應任何類似的問題來解決我的問題，請原諒我的愚蠢。懸停在子項上的不透明度轉換

<nav> 
    <ul> 
     <li><a href='#'><img src='#'>hover me</a> 
      <ul> 
       <li> 
        <h1>Tell me why</h1> 
        <h2>the nested ul opacity doesn't transition</h2> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</nav>

nav ul { 
    position:relative; 
    width:64px; 
    margin:350px 0 0 0; /*for the fiddle*/ 
    padding:0; 
    background:#999; 
    list-style:none; 
} 

nav img {float:left width:64px; height:64px;} 
nav a {float:left;} 

nav ul li {float:left; background-color:#999;} 

nav ul li:hover > ul {display:block; opacity:1;} 

nav ul ul { 
    display:none; 
    position:absolute; 
    opacity:0.5; 
    width:300px; 
    height:200px; 
    bottom:100%; 
    transition:opacity 1s linear; 
}

我已經制造和使用上面的菜單（無轉換）只是標準的彈出式菜單，但我想轉變它的透明度，我已經看到一些網站做到了，但是我通過其他人的代碼感到非常困惑。我相對較新&自學成HTML/CSS，所以我做錯了什麼的一點點走過會是最有幫助的。

感謝

來源

2014-09-22 Clueless

需要少量的清晰度之間的空間，你在哪裏徘徊和特定元素的不透明度應設置？ – 2014-09-22 02:32:53

或許這就是你想要什麼：Fiddle

第一，你的動畫沒有工作，因爲你使用的風格display: none，這並沒有使element並沒有預留空間，它，所以它不會得到opacity的動畫效果，所以如果你想使用opacity轉換，你需要使用visibility: hidden，因爲即使你的element被隱藏，它仍然存在。所以，你需要的就是改變你的CSS這個

nav ul li:hover > ul {visibility:visible; opacity:1;} 

nav ul ul { 
    visibility:hidden; 
    display:block; 
    position:absolute; 
    opacity:0; 
    width:300px; 
    height:200px; 
    bottom:100%; 
    transition:opacity 1s linear, visibility 1s linear; 
}

注意，您需要亦是需要添加TRANSATION爲visibility，否則，它只會彈出進出，當你在它懸停，也visibility: hidden會工作，因爲你的元素是使用position: absolute，如果沒有，就會留下一個和下一個element

來源

2014-09-22 02:37:24 Kyojimaru

非常感謝，像魅力一樣工作。而且我更瞭解它！ – Clueless 2014-09-22 02:47:24

懸停在子項上的不透明度轉換

回答

相關問題