jQuery:隐藏元素在悬停时向下移动？

Question

当我的AppBorder元素悬停时，隐藏的AppMenu出现在右侧。但是，一旦我悬停下来，AppMenu会在AppBorder消失之前快速下降到AppBorder以下。我如何摆脱这种奇怪的后遗症，这样AppMenu就会在悬停时消失，而不是在我的主要元素下突然消失？

Answer 1

这是因为您使用CSS :hover来更改父元素的宽度，它不会与jquery同时启动，jquery会使右侧的条带完全消失。会很好的褪色，但是当你取消:hover元素时，它会在右边的条子被完全移除之前立即移除新的宽度，这会导致它在下方移动，因为没有足够的水平空间让它在右边显示。

不过，您不需要宽度，只需在父元素上使用display: flex (或者我使用了display: inline-flex，因为您最初使用了该元素)，并且它们将并排排列，而且它的行为似乎与预期的一样。

​

$(function(){
	$('.AppBorder').hover(function(){
		var menuId = $(this).attr('data-menuid');
		$('#'+menuId).stop(false, true).fadeToggle('fast');
	});
});

.AppBorder {
	border: 1px solid #898989;
	display: inline-flex;
	margin: 10px 7px 10px 7px;
}
.AppBorder:hover {
	cursor: pointer;
}
.AppImg {
	width: 70px;
	height:70px;
	margin: 3px 0px 0px 3px;
}
#Text {
	width: 80px;
	height: 16px;
	float: left;
	font-family: Trebuchet MS, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	padding: 5px 0px 5px 0px;
}
.AppMenu {
	display: none;
}
.IconBorder, .Icon4Border {
	border: 1px solid #B7B7B7;
	border-top: none;
	border-right: none;
 	width:26px;
	height: 18px;
	text-align: center;
	padding: 4px 0px 2px 0px;
}
.Icon4Border {
	border-bottom: none;
}
.Icon {
	width: 17px;
	height: 17px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="AppBorder" data-menuid="Menu1">
<div id="IconAndText">
	<div><img src="I/App1.png" class="AppImg"></div>
	<div id="Text">Text</div>
</div>
		
<div class="AppMenu" id="Menu1">
	<div class="IconBorder"><img src="#" class="Icon"></div>
	<div class="IconBorder"><img src="#" class="Icon"></div>
	<div class="IconBorder"><img src="#" class="Icon"></div>
	<div class="Icon4Border"><img src="#" class="Icon"></div>
</div>
	
</div>

​