鼠标经过显示div,鼠标离开原来的div或离开隐藏的div都隐藏后来的那个DIV。

我下面的代码只能在鼠标离开原来的div才能隐藏后来的div，鼠标从后来的div离开不能隐藏div... 我下面的代码只能在鼠标离开原来的div才能隐藏后来的div，鼠标从后来的div离开不能隐藏div 展开





 我来答

3个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

sunny叶雨竹
2016-10-22 · TA获得超过146个赞

知道答主

回答量：40

采纳率：100%

帮助的人：31.6万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		.nav{width:600px;height:40px;margin:0 auto;background: #cdcccc;}
		.nav ul{width:602px;height:40px;list-style:none;}
		.nav ul li{float:left;width:200px;height:40px;line-height:40px;text-align:center;border-right:1px solid #999;}
		.nav ul li.last{border-right:none;position:relative;}
		.nav ul li a{display:block;cursor:pointer;}
		.showdetail{background: #dfdfdf;position: absolute;width:200px;left:0;top:40px;display:none;}
		.showdetail dt{border-bottom: 1px solid #aaa;height: 40px;line-height: 40px;color:#666;}
		.showdetail dt:hover{background:#999;color:#fff;}

	</style>
	
</head>
<body>

	<div class="nav">
		<ul>
			<li><a>首页</a></li>
			<li><a>导航一</a></li>
			<li class="last">
				<a>导航二</a>
				<dl class="showdetail">
					<dt><a>小类1</a></dt>
					<dt><a>小类2</a></dt>
					<dt><a>小类3</a></dt>
					<dt><a>小类4</a></dt>
				</dl>
			</li>
		</ul>
	</div>


	<script type="text/javascript" src="jquery-1.10.1.js"></script>
	<script>
		$(function(){

			$(".last").hover(function(){
				$(".showdetail").slideDown();
			},function(){
				$(".showdetail").slideUp();
			})


		})

	</script>

</body>
</html>