当鼠标移入另一元素时如何继续显示

在做做华为官网顶部部分时，购物车的隐藏与显示，当鼠标移入a标签时购物车显示，当鼠标离开a标签时要隐藏，但如果鼠标移入到购物车仍要显示

布局本来是一个a标签和一个div的盒子，
如果只是这样，当移出a标签时移入了div的盒子也不会显现
解决方法：
用一个div把a标签和里面的盒子包含起来

<!--购物车的隐藏-->
<div class="sdkf">
	<a href="#" id="gowu" style="background: #E8E8E8;">购物车</a>
	<div class="gwc" id="gwc" style="display: none;box-shadow: 0px 0px 10px 2px #ddd;">
		<p>您的购物车是空的，赶紧选购吧！</p>
	</div>
</div>

css部分

.sdkf{
	position: absolute;
	top: 0px;
	right: 70px;
	z-index: 999;
}
#gowu{
	display: inline-block;
	width: 80px;
	height: 40px;
	background: #E8E8E8;
	text-align: center;
	z-index: 9999999;
	float: right;
}
#gowu:hover{
	background: #fff;
	box-shadow: 0px 0px 10px 2px #ddd;
}
.gwc{
	width: 500px;
	height: 300px;
	line-height: 550px;
	box-shadow: 0px 0px 10px 2px #ddd;
	background: #fff;
	z-index: 9;
	margin-top: 40px;
}
.gwc p{
	font-size: 14px;
	text-align: center;
	color: grey;
}

在js中写入display的隐藏和显示即可

		var gwc = document.getElementById("gwc");
		var gowu = document.getElementById("gowu");	
		gowu.onmouseover = function(){
			gwc.style.display = "block";	
			gowu.style.background = "#fff";
			gowu.style.boxShadow = " 0px 0px 10px 2px #ddd";
		};
		gowu.onmouseout = function(){
			gwc.style.display = "none";
		};
		gwc.onmouseover = function(){
			gwc.style.display = "block";
			gowu.style.background = "#fff";
			gowu.style.boxShadow = " 0px 0px 10px 2px #ddd";
		};
		gwc.onmouseout = function(){
			gwc.style.display = "none";
			gowu.style.background = "";	
			gowu.style.boxShadow = "";
		};