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

将my AppBorder元素悬停在上方时，右侧将显示my hidden AppMenu。但一旦我将鼠标悬停在外，AppMenu会在AppBorder消失之前快速下降到AppBorder下方。我如何摆脱这种奇怪的后遗症，使AppMenu在悬停时消失，而不是在我的主元素下扑通一声

这是因为您使用CSS:hover来更改父对象的宽度，它不会与jquery同时启动，而jquery会使右侧的条带完全淡入淡出。淡入时可以很好地工作，但当您取消悬停元素时，会在完全删除右侧的条带之前立即删除新宽度，导致条带向下移动，因为没有足够的水平空间显示到右侧

不过，您不需要宽度，您可以使用display:flex或我使用的display:inline flex，因为您最初将该元素浮动在父元素上，它们将并排排列，并且它的行为似乎符合预期

$function{ $'.AppBorder'.hover函数{ var menuId=$this.attr'data-menuId'； $+menuId.stopfalse，true.fadeToggle'fast'； }; }; .AppBorder{ 边框：1px实心8989； 显示：内联flex； 保证金：10px 7px 10px 7px； } .AppBorder:悬停{ 光标：指针； } .AppImg{ 宽度：70px； 高度：70像素； 保证金：3px 0px 0px 3px； } 正文{ 宽度：80px； 高度：16px； 浮动：左； 字体系列：投石机MS，Helvetica，无衬线； 字体大小：13px； 字号：500； 文本对齐：居中； 填充：5px0px 5px0px； } .AppMenu{ 显示：无； } .IconBorder、.Icon4Border{ 边框：1px实心B7B7； 边界顶部：无； 边界权：无； 宽度：26px； 高度：18px； 文本对齐：居中； 填充：4px0px 2px0px； } .Icon4Border{ 边框底部：无； } .图标{ 宽度：17px； 高度：17px； } 文本

---

@Mohamed Yousef我刚试过，但菜单仍然会落在AppBorder下面，它只是在落下的边框内向右移动。@Michael Coker感谢您添加ajax代码不客气。啊，这就是问题所在。我不认为这与不同代码的时间有关，现在完全有道理了。真的，感谢您的清晰解释和帮助修复代码。我很感激——谢谢你@confused5000没问题：如果要使用现有代码执行此操作，可以添加正在更改的宽度：将鼠标悬停到类，在鼠标悬停时将该类添加到元素，然后在元素淡出后使用$.fadeOut中的回调删除该类。但它更简洁，不需要计算宽度或任何东西，只需在我的答案中使用flex方法。我认为您使用的第一种方法要简单得多。我对Javascript/jQuery语法不是很在行，所以用jQuery代码阅读第二个方法对我帮助很大。我很感激你这么做，你真的做了很多事情来帮助人们-非常感谢！