鼠标悬停在菜单和超时

Question

我有多级菜单，当我将鼠标悬停在一个菜单项上时，如果该项目有子菜单，它将显示子菜单项。我认为这是一个正常的下拉菜单操作。问题是当我将鼠标从主菜单项移动到子菜单项的速度过快时，如果鼠标不在路径中，子菜单项将消失，我必须再次悬停才能显示

我在网上搜索了很多指南

[http://stackoverflow.com/questions/2316213/simple-jquery-dropdown-cleartimeout-settimeout-issues]

如果我使用上述指南，当我在主菜单项之间快速悬停时，会显示下一个子菜单项，但也会显示上一个子菜单（因为它有超时设置）

不知道有没有办法解决这个问题？请帮忙给我一些提示

我将我的代码发布到http://jsfiddle.net/v4aWZ/9/

非常感谢

Answer 1

尝试使用HoverIntent 来减少对意外悬停的响应。

Answer 2

给你：一个简单的脚本

HTML 只是为了展示一个例子。要点是添加 JavaScript (+jQuery) 并在您的 CSS 中，为每个 li:hover 添加一个属性 li.hover，如下所示：

#nav li:hover, #nav li.hover {
    /* your css */
}

	/* timeout on hover: big menu */
	var hoverTimeout; //declare timeout
	$('#nav li').hover(function() { //mouse enter
      
		clearTimeout(hoverTimeout); //remove timeout, we're taking over control
		$('#nav li').removeClass('hover'); //clear all that are hovered
		$(this).parents('li').addClass('hover'); //add class to all our parents
      
	},function() { //mouse leave
      
		var $this=$(this); //create local copy
		hoverTimeout = setTimeout(function() {
			$this.parents('li').removeClass('hover'); //un-hover all parents
		},1000); //1 second after we remove our mouse
      
	});

@charset "UTF-8";

body {
  background: #aaa;  
}
nav {
  display: table-row;
    padding: 0;
    margin: 0;
    border: 0;
}
    nav a {
        display: block;
        line-height: 1em;
        text-decoration: none;
    }
    #nav, nav li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
#nav {
    position: relative;
    z-index: 597;
    *display: inline-block;
    padding-left: .75rem;
    display: table-cell;
  width: 99%;
}
    #nav li {
        float: left;
        min-height: 1px;
        vertical-align: middle;
    }
    #nav li.hover, #nav li:hover {
        position: relative;
        z-index: 599;
        cursor: default;
    }
    #nav ul {
        visibility: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 598;
        width: 100%;
        bottom: 0;
        left: 0;
        margin-top: 0;
        text-transform: none;
        min-width: 210px;
    }

    #nav ul .hassubmenu>a:after {
        content: "+";
        float: right;
        width: 10px;
        text-align: center;
    }
    #nav ul .hassubmenu:hover>a:after, #nav ul .hassubmenu.hover>a:after { content: "-" }
        #nav ul ul {
            top: 0;
            left: auto;
            right: -99.5%;
        }
    #nav li.hover>ul, #nav li:hover>ul { visibility: visible }
    #nav ul, #nav {
        list-style-type: none;
        padding-left: 0;
    }
#nav>li {
    padding: .5rem;
    background: #ddd;
    border: #56a0d3 solid 2px;
    border-top: none;
    border-bottom: none;
}
  #nav>li+li { border-left: none }
  #nav>li a {
      color: #000;
      font-weight: 700;
      text-decoration: none;
  }
  #nav>li:hover>a, #nav>li.hover>a { opacity: 1 }
#nav ul li {
    position: relative;
    float: none;
    font-weight: 400;
    background: #fff;
    background: transparent\9;
    background: hsla(0,0,100%,.7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff);
    zoom: 1;
    padding: 5px 10px;
}
  #nav ul li:nth-child(n) { filter: none }
  #nav ul li:hover, #nav ul li.hover { background: #fff }
    #nav ul li a { line-height: 1.2rem }
    #nav ul li:last-child>a { border-radius: 0 0 3px 3px }
#nav ul li ul li ul li li {
    background: #000;
    background: transparent\9;
    background: rgba(0,0,0,.7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000);
    zoom: 1;
    border: 10px solid transparent;
    border-top: 1px solid #ddd;
    border-bottom: none;
}
#nav ul li ul li ul li li:nth-child(n) { filter: none }
#nav ul li ul li ul li li:first-child { border-top: none }
#nav ul li ul li ul li li:last-child { border-bottom: none }
#nav ul li ul li ul li li:hover, #nav ul li ul li ul li li.hover { background: #000 }
#nav ul li ul li ul li li a { color: #62a2d6 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
	<ul id="nav">

		<li class="hassubmenu">
			<a href="link">Menu-item</a>

			<ul>
				<li class="hassubmenu">
					<a href="link">Sub-menu-item</a>

					<ul>
						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>
					</ul>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>
			</ul>
		</li>

		<li class="hassubmenu">
			<a href="link">Menu-item</a>

			<ul>
				<li class="hassubmenu">
					<a href="link">Sub-menu-item</a>

					<ul>
						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>
					</ul>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>
			</ul>
		</li>

		<li class="hassubmenu">
			<a href="link">Menu-item</a>

			<ul>
				<li class="hassubmenu">
					<a href="link">Sub-menu-item</a>

					<ul>
						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>
					</ul>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>
			</ul>
		</li>
	</ul>
</nav>