悬停在孩子身上的不透明度过渡

Question

我试图在父元素悬停时使子元素过渡的外观变得不透明。有人可以向我解释为什么这不起作用，我确定这是一个重复的问题，但我似乎无法调整任何类似的问题来解决我的问题，请原谅我的愚蠢。

http://jsfiddle.net/vg0hLstr/1/

<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 的新手，并且是自学成才的，所以稍微了解一下我做错了什么会很有帮助。

谢谢

Answer 1

也许这就是你想要的：Fiddle

首先，你的动画不起作用，因为你使用了样式display: none，它没有渲染element，也没有为它预留空间，所以它不会得到@987654324的动画效果@，所以如果你想使用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;
}

请注意，您还需要为visibility 添加转换，否则，当您将鼠标悬停在它上面时，它只会弹出和弹出，而且visibility: hidden 也会起作用，因为您的元素正在使用position: absolute，如果没有，会在上一个和下一个element之间留一个空格@