悬停在子项上的不透明度转换

我试图在父级悬停时使子元素转换不透明度的外观。有人可以向我解释为什么这不起作用，我相信这是一个重复的问题，但我似乎无法适应任何类似的问题来解决我的问题，请原谅我的愚蠢。悬停在子项上的不透明度转换

<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

悬停在子项上的不透明度转换

回答

相关问题