我正在构建一个可以淡入淡出下拉菜单的导航。因为我想用纯CSS构建它,我试图使用转换。但无论我做什么,它都不起作用,虽然它似乎是正确的方式。
我将子列表的隐藏正常版本定义为none和opacity 0,告诉它使用转换。然后,在其父项悬停时,它应为显示块,并且应该转换不透明度。
这里的问题在哪里?
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>
供您参考,这里有一个小提琴(不要介意过渡的呼吁&#34;所有&#34;而不仅仅是&#34;不透明&#34;,试过两个:-)) :
https://jsfiddle.net/hzhnqx1r/
到目前为止在Firefox和Safari中尝试过它。两者都有同样的问题。
感谢您的帮助!
答案 0 :(得分:0)
如果您将display
属性切换为/ 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
上的:hover
在取消悬停时使用left
属性动画的延迟以允许淡出显示。
答案 1 :(得分:0)
然后你不需要显示:none和display:阻止悬停。 像这样
#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
}
答案 2 :(得分:-1)
For your knowledge opacity property value work with in 0-0.9
我还更新了您的小提琴参考,以便您更好地理解