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

Posted 2023-05-08

【中文标题】悬停在孩子身上的不透明度过渡

【英文标题】：Hover opacity transition on child

【发布时间】：2014-11-15 22:22:06

【问题描述】：

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

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

谢谢

【问题讨论】：

需要一点清晰，你悬停在哪里以及应该设置哪些特定元素的不透明度？

【参考方案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之间留一个空格@

【讨论】：

非常感谢，工作就像一个魅力。我更了解它！