javascript CSS 下拉菜单：添加鼠标移出延迟
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8422123/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Dropdown Menu: Add delay on mouse out
提问by Zulkhaery Basrul
I have dropdown using CSS and HTML below:
我有下面使用 CSS 和 HTML 的下拉列表：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Main Menu</title>
<style>
.menu
{
float:left;
background:#CCC;
margin:0px;
padding:0px;
}
.menu li
{
position:relative;
float:left;
width:180px;
padding: 5px 0px;
list-style: none;
}
.menu li:hover
{
background:#999;
}
.menu ul
{
display:none;
position:absolute;
background:#CCC;
padding:0;
margin:5px 0 0 0;
}
.menu ul li ul
{
left:100%;
top:0;
margin:0px;
}
.menu li:hover ul ul, .menu li:hover ul ul ul
{
display: none;
}
.menu li:hover ul, .menu ul li:hover ul, .menu ul ul li:hover ul
{
display: block;
}
</style>
</head>
<body>
<ul class="menu">
<li>Home</li>
<li>
Categories
<ul>
<li>Lorem Ipsum</li>
<li>Dolor Sit Amet</li>
<li>Consectetuer</li>
<li>
Adipiscing
<ul>
<li>Child Elit Set Diam Nonummy</li>
<li>
Child Suspendisse sed
<ul>
<li>Grand Child Nulla dolor dui</li>
<li>Grand Child Venenatis feugiat</li>
<li>Grand Child Morbi ac lectus</li>
<li>Grand Child Nulla dolor dui</li>
<li>Grand Child Venenatis feugiat</li>
<li>Grand Child Morbi ac lectus</li>
</ul>
</li>
<li>Child Nulla dolor dui</li>
<li>Child Venenatis feugiat</li>
<li>Child Morbi ac lectus</li>
</ul>
</li>
<li>Elit Set Diam Nonummy</li>
<li>Suspendisse sed</li>
<li>
Nulla dolor dui
<ul>
<li>Child Elit Set Diam Nonummy</li>
<li>Child Suspendisse sed</li>
<li>Child Nulla dolor dui</li>
<li>Child Venenatis feugiat</li>
<li>Child Morbi ac lectus</li>
</ul>
</li>
<li>Venenatis feugiat</li>
<li>Morbi ac lectus</li>
<li>pharetra</li>
</ul>
</li>
<li>Order</li>
<li>Payment</li>
<li>Contact</li>
</ul>
</body>
</html>
JSBIN:
http://jsbin.com/anojif
JSBIN：http://jsbin.com/anojif
I want to add delay in this dropdown, so when the mouse is moved out, child menu still appear for seconds. I have try some tutorial out there, but it so confuse.
我想在这个下拉菜单中添加延迟，所以当鼠标移出时，子菜单仍然会出现几秒钟。我已经尝试了一些教程，但它很混乱。
I dont want using any jquery dropdown menu for some reason. Can you help me how to make this happen using javascript.
由于某种原因，我不想使用任何 jquery 下拉菜单。你能帮我如何使用 javascript 做到这一点吗？
SOLVED: http://jsbin.com/otapex/2
已解决：http: //jsbin.com/otapex/2
采纳答案by aepheus
Change all your :hover to a class (e.g. ".hover"). Add mouseover/mouseout events to add the "hover" class in a setTimeout. The setTimeout should check if the user is still hovering over the element.
将所有 :hover 更改为一个类（例如“.hover”）。添加 mouseover/mouseout 事件以在 setTimeout 中添加“悬停”类。setTimeout 应该检查用户是否仍然悬停在元素上。
回答by Ben
I think what you're looking for is hoverIntent
我想你要找的是hoverIntent
http://cherne.net/brian/resources/jquery.hoverIntent.html
http://cherne.net/brian/resources/jquery.hoverIntent.html
This accomplishes what you want to do. If you are new to javascript, it will take some playing around with, but it isn't not that hard.
这完成了你想做的事情。如果您是 javascript 的新手，可能需要花一些时间来尝试一下，但这并不难。
