Question

我正在尝试在父项悬停时使子元素转换不透明度出现。有人可以向我解释为什么这不起作用，我确定这是一个重复的问题，但我似乎无法调整任何类似的问题来解决我的问题，请原谅我的愚蠢。 / p>

<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;
}

我已经制作并使用了上面的菜单（没有过渡）只是标准的弹出式菜单，但我想转换它的不透明度，我看到有些网站这样做，但我感到非常困惑通过其他人的代码。我是一个相对较新的＆amp;自学成熟的HTML / CSS，所以对我做错了什么的一点点了解将是最有帮助的。

由于

Answer 1

也许这就是你想要的：Fiddle

首先，你的动画不起作用，因为你使用了display: none样式，它没有渲染element并且没有为它预留空间，因此它不会获得动画效果opacity的{{1}}，如果您想使用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

之间留一个空格

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

1 个答案: