悬停时不透明度的 CSS3 过渡不起作用

Posted

技术标签:

【中文标题】悬停时不透明度的 CSS3 过渡不起作用【英文标题】:CSS3 transition for opacity on hover does not work 【发布时间】:2015-03-05 09:09:21 【问题描述】:

我正在构建一个可以淡入淡出下拉子菜单的导航。因为我想用纯 CSS 构建它,所以我尝试使用过渡。但是无论我做什么,它都不起作用,尽管它似乎是正确的方法。

我将子列表的隐藏正常版本定义为无显示和不透明度 0,告诉它使用过渡。然后,在它的父级悬停时,它应该是 display-block'd 并且应该转换不透明度。

问题出在哪里?

CSS:

#nav-main>ul>li>ul 
    display: none;
    opacity: 0;
    position: absolute;
    top: 2rem;
    background-color: #fef1a3;
    margin: 0;
    padding: 0.25rem 0;
    text-align: center;
    list-style: none;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
    -o-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -khtml-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear

#nav-main>ul>li:hover>ul 
    display: block;
    opacity: 1

HTML:

<nav id="nav-main">
    <ul>
        <li>
            <a href="#">Link 1</a>
            <ul>
                <li>
                    <a href="#">Link 1.1</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

供您参考,这是一个小提琴(不要介意转换“全部”而不是“不透明”的调用,两者都尝试了:-)):

https://jsfiddle.net/hzhnqx1r/

目前在 Firefox 和 Safari 中尝试过。两者都有同样的问题。

感谢您的帮助!

【问题讨论】:

【参考方案1】:

如果您将display 属性切换到none 或从none 切换,则转换将不起作用。 (MDN: Which CSS properties are animatable)

一个技巧是将其移入/移出视线。

一个简化的例子(你的代码

#nav-main>ul>li>ul 
    opacity: 0;
    position: absolute;
    top: 1rem;
    left:-9999rem;

    transition: opacity 0.5s linear 0s, left 0s linear 0.5s;

#nav-main>ul>li:hover>ul 
    opacity: 1;
    left:0;

    transition: opacity 0.5s linear;

我们在这里所做的是,我们最初将ul 放置在屏幕之外(left:-9999rem 并将其设置为0 on :hover

在取消悬停时对 left 属性动画使用延迟以使淡出可见。​​


https://jsfiddle.net/hzhnqx1r/3/的演示

【讨论】:

【参考方案2】:

那么你不需要 display: none 和 display: block on hover。 像这样

#nav-main>ul>li>ul 
    opacity: 0;
    position: absolute;
    top: 2rem;
    background-color: #fef1a3;
    margin: 0;
    padding: 0.25rem 0;
    text-align: center;
    list-style: none;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
    -o-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -khtml-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear

#nav-main>ul>li:hover>ul 
    opacity: 1

【讨论】:

【参考方案3】:
For your knowledge opacity property value work with in 0-0.9 

我还更新了您的小提琴参考,以便您更好地理解

https://jsfiddle.net/hzhnqx1r/2/

【讨论】:

以上是关于悬停时不透明度的 CSS3 过渡不起作用的主要内容,如果未能解决你的问题,请参考以下文章

为啥背景过渡:linear-gradient() 在悬停时不起作用?

填充颜​​色的CSS过渡在悬停时不起作用[重复]

CSS3 过渡/悬停效果在 Firefox 中不起作用; Firefox 错误?

CSS3 动画过渡:不透明度不起作用

悬停时不透明度的动画变化在 Internet Explorer 中不起作用

css3高度过渡不起作用