悬停时不透明度的 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() 在悬停时不起作用?
CSS3 过渡/悬停效果在 Firefox 中不起作用; Firefox 错误?