老师，请问如何实现鼠标移出购物车按钮，下拉菜单也隐藏，按钮样式复原

来源：5-2 作业题

Gavinnn

2019-07-11 10:28:30

<!-- logo区 -->
	<div id="logo" class="logo bg">
		<div class="wrap">
		<!-- logo图 -->
		<div class="logo_pic">
			<a href="#" class="pic">
				<img src="素材/logo.png" alt="logo.png">
			</a>
		</div>
		<!-- 搜索栏 -->
		<div class="logo_search">
			<input class="lang clearfix" type="text" placeholder="灵魂美食一元抢" /><input class="btn" type="button" value="搜索" />
		</div>
		<!-- 购物车 -->
		<div class="logo_car">
			<button class="car">
			<img class="pic" src="素材\icon\26.png" alt="26.png">
			购物车&nbsp;&nbsp;&ensp;|&ensp;&nbsp;&nbsp;0
			</button>
			<div class="carMenu">
				<div class="new">最新加入的商品</div>
				<div class="carMenu-main">
					<div class="commodity">
						<img src="素材/cart/1.png"/>
						<a href="#" href="#" class="content">adidas阿迪达斯 训练 男子</a><span>X</span>
						<p class="price">￥355 × 1</p>
					</div>
					<div class="commodity">
						<img src="素材/cart/2.png"/>
						<a href="#" class="content">玉兰油多效修护三部曲套装</a><span>X</span>
						<p class="price">￥199 × 2</p>
					</div>
					<div class="commodity">
						<img src="素材/cart/3.png"/>
						<a href="#" class="content">Apple iPhone 7(A1660)</a><span>X</span>
						<p class="price">￥6188 × 1</p>
					</div>
					<div class="commodity">
						<img src="素材/cart/4.png"/>
						<a href="#" class="content">飞利浦面条机 HR2356/31</a><span>X</span>
						<p class="price">￥659 × 4</p>
					</div>
					<div class="commodity">
						<img src="素材/cart/5.png"/>
						<a href="#" class="content">罗技G29力反馈游戏方向</a><span>X</span>
						<p class="price">￥2999 × 1</p>
					</div>
					<div class="commodity">
						<img src="素材/cart/1.png"/>
						<a href="#" class="content">adidas阿迪达斯 训练 男子</a><span>X</span>
						<p class="price">￥355 × 1</p>
					</div>
					<div class="commodity">
						<img src="素材/cart/2.png"/>
						<a href="#" class="content">玉兰油多效修护三部曲套装</a><span>X</span>
						<p class="price">￥199 × 2</p>
					</div>
					<div class="commodity">
						<img src="素材/cart/3.png"/>
						<a href="#" class="content">Apple iPhone 7(A1660)</a><span>X</span>
						<p class="price">￥6188 × 1</p>
					</div>
					<div class="commodity">
						<img src="素材/cart/4.png"/>
						<a href="#" class="content">飞利浦面条机 HR2356/31</a><span>X</span>
						<p class="price">￥659 × 4</p>
					</div>
					<div class="commodity">
						<img src="素材/cart/5.png"/>
						<a href="#" class="content">罗技G29力反馈游戏方向</a><span>X</span>
						<p class="price">￥2999 × 1</p>
					</div>
				</div>
				<div class="commit">
				共27件商品，共计 ￥0.00
				<button>去购物车</button>
				</div>
			</div>
			
		</div>
		</div>
	</div>

/* #logo 内部样式 */
.logo{
	height: 125px;
}
.logo .wrap{
	width: 1160px;
	margin:0 auto;
	position: relative;
	padding: 0 20px;
}
.logo_pic,
.logo_search,
.logo_car{
	display: inline-block;
	float: left;
}
.logo .logo_pic{
	width: 140px;
	height: 50px;
	padding: 35px 50px 40px 10px;
}

.logo .logo_search{
	width: 660px;
	line-height: 125px;
	font-size: 12px;
	padding: 0 20px 0 80px;
}
.logo_search .lang{
	width: 598px;
	height: 38px;
	border: 1px solid #cfd2d5;
}
.logo_search .btn{
	width: 60px;
	height: 40px;
	background-color: #07111b;
	cursor:pointer;    /* 悬停显示为小手 */
	color: #fff;
}
.logo .logo_car{
	
}
.logo_car .car{
	width: 160px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	margin: 44px 0 0 40px;
	padding-right: 35px;
	background: url(../素材/icon/23.png) #f01414 no-repeat 130px center;
	color: #fff;
	font-size: 12px;
}
.car .pic{
	width: 15px;
	height: 15px;
	float: left;
	padding-left: 20px;
	padding-top: 12px;
}
.logo_car .carMenu{
	width: 300px;
	height: 450px;
	line-height: 33px;
	background: #fff;
	border: 1px solid #808080;
	position: absolute;
	top: 82.5px;
	right: 20px;
	z-index: 2;
}
.carMenu .new{
	padding: 5px 20px;
}
.carMenu .carMenu-main{
	height: 340px;
	overflow-y: auto;
	margin-left: 10px;
	padding-right: 10px; 
}
.carMenu .commodity{
	width: 100%;
	height: 65px;
	float: left;
	border-top: 1px solid rgba(128,128,128,.5);
	font-size: 12px;
}
.carMenu .commodity:hover{
	background: #f3f5f7;
}
.carMenu .commodity:hover .content{
	color: #f00;
}
.commodity img{
	width: 50px;
	height: 50px;
	padding: 10px;
	float: left;
}
.commodity .content{
	width: 180px;
	color: #808080;
}
.commodity span{
	display: inline-block;
	float: right;
	font-weight: bold;
	color: #808080;
}
.carMenu .commit{
	padding: 10px 30px;
	height: 40px;
	line-height: 40px;
	font-size: 12px;
}
.commit button{
	width: 60px;
	height: 40px;
	background:#f00;
	color: #fff; 
	float: right;
	border-radius: 2px;
	cursor: pointer;
}

// 右侧导航 从左向右效果
$.fn.navFix = function(){

	$('.fix').hover(function(){
		$(this).find('span').stop().animate({
			'right':'40px'
		},500)},function(){

		$(this).find('span').stop().animate({
			'right':'-40px'
		})
	}).mouseover(function(){
		$(this).css({'background':'#71777d'});
	}).mouseout(function(){
		$(this).css({'background':'#b7bbbf'});
	})

};

// 购物车
$.fn.car = function(){
	$('.carMenu').hide();
	$('.car').mouseenter(function(){
		$(this).css({
			'border':'1px solid #808080',
			'background-color': '#fff',
			'background-image':'url(素材/icon/24.png)',
			'color': '#f00'
		});
		$('.pic').attr('src','素材/icon/25.png');
		$('.carMenu').show().mouseleave(function(){
			$('.carMenu').hide();
		});
	});
	$('.carMenu').mouseleave(function(){
		
		$('.car').css({
			'border':'0',
			'background': 'url(素材/icon/23.png) #f01414 no-repeat 130px center',
			'color': '#fff'
		});
		$('.pic').attr('src','素材/icon/26.png');
		
	});


};

//左侧导航 隐藏的子菜单
$.fn.navLeft = function(){

	$('.item').hover(function(){

		var index = $('.item').index(this);
		$(this).css({'background':'#fff','color':'#f00'});
		$('.submenu').eq(index).show()
					 .siblings().hide();
	},function(){
		$(this).css({'background':'rgba(232,20,20,0.9)','color':'#fff'});
		$('.submenu').hide();
	});

	/*$('submenu').mouseover(function(){
		$('.submenu').show();
		
	});*/

	
}

		
		
		

	

	
 
//页面脚本逻辑
$(function(){

	$('.navfix').navFix();
	$('.logo_car').car();
	$('nav_left').navLeft();

});