Question

当我将鼠标悬停在菜单项上时，我希望子菜单淡入。实际上我已经做到了这一点。但是，当我尝试单击其中一个子菜单选项时，子菜单会在我有时间单击子菜单项之前消失。

以下是导航菜单的html：

#nav {
background-color: #F8F8F8;
padding-right: 45px;
}

#nav ul {
position: relative;
margin: 10px;
font-family: 'Crete Round';
font-size: 20px;
font-weight: bold;
list-style-type: none;
float:right;
top:22px;
}

#nav ul li {
display: inline-block;
}

#nav ul li a:hover {
color: #33CCCC;
}

#nav ul li a, visited{
margin:10px;
display: block;
text-decoration: none;
text-align: left;
}

#nav ul li:hover ul{
display: block;
}

#nav ul ul {
display:none;
position:absolute;
background-color: #F8F8F8;
z-index:100;
padding-left: -25px;
border: 2px solid #F2F2F2;
border-top: 0;
margin-top: 12px;
}

#nav ul ul li {
display: block;
width:100px;
margin-left:-40px;
}

#nav ul ul li:hover {
background-color: #505050; 
}

#nav ul ul li a:hover {
color:white; 
}

#nav ul li:hover > ul {
opacity: 0;
-webkit-animation: fadein 2s; /* Safari and Chrome */
-moz-animation: fadein 2s; /* Firefox */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera */
}

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

以下是导航和子菜单的附带css：

vw

非常感谢任何向正确方向的推动。

Answer 1

删除程序部分

#nav ul li:hover > ul {
opacity: 0;
-webkit-animation: fadein 2s; /* Safari and Chrome */
-moz-animation: fadein 2s; /* Firefox */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera */
}

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

Answer 2

默认情况下，使用关键帧不会保存最终动画状态。所以它可以追溯到opacity: 0。您必须使用带有转发值的动画填充模式来保存它（请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode）。

用法：

#nav ul li:hover > ul {
opacity: 0;
-webkit-animation: fadein 2s forwards; /* Safari and Chrome */
-moz-animation: fadein 2s forwards; /* Firefox */
-ms-animation: fadein 2s forwards; /* Internet Explorer */
-o-animation: fadein 2s forwards; /* Opera */
}

你也可以省略opacity: 0，直到该元素在悬停之前不可见，这也应该有用。

将鼠标悬停在菜单项上，子菜单淡入淡出然后消失

2 个答案: