<分区>
标签 javascript css html menu
<分区>
我试图用 css 延迟悬停在菜单上，我查看了这个网站上的几个类似问题，但我无法让它工作。
这是我的代码的基础 https://jsfiddle.net/rja3spwm/ .如果有人可以指出一些使它起作用的提示，请谢谢。
<div id="menu">
<ul id="nav">
<li><a href="#">SECTION 1</a>
<ul>
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 1</a></li>
</ul>
</li>
<li><a href="#">SECTION 2</a>
<ul>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 2</a></li>
</ul>
</li>
<li><a href="#">SECTION 3</a>
<ul>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 3</a></li>
</ul>
</li>
</ul>
</div>
最佳答案
您可以使用 CSS3 动画我 fork 了您的 fiddle
/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
position: absolute;
display: block;
width: 962px;
height: auto;
position: absolute;
margin: 40px 0 0 0;
background: #58D3F7 url(../img/menu-child.png) repeat-x;
z-index: 9999;
animation-name: example;
animation-duration: 250ms;
animation-iteration-count:1;
animation-direction: reverse;
}
@keyframes example {
25% {
display: block;
opacity:.75
}
50% {
display: block;
opacity:.50
}
75% {
display: block;
opacity:.25
}
100% {
display: block;
opacity:0
}
}
编辑 刚刚看到您说将鼠标悬停，所以我假设您希望在它关闭时延迟。让我看看...
关于javascript - CSS 悬停延迟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36361844/