jquery - FadeIn() 破坏了 CSS 悬停功能

Question

为什么 jQuery 的 .fadeIn() 函数会破坏我的 CSS 悬停功能？当您将鼠标悬停在它上面时，我的 div 应该会显示它的菜单。当我的页面显示我要使菜单淡入时，它应该具有我的常规悬停功能。

这JSFiddle很好地演示了这个问题。

为什么它会破坏我的悬停功能，我如何才能同时保持淡入和悬停功能？

注意 我需要保留 display: flex 以确保菜单 div 在比其父 div 宽时不会换行。

.widget {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #ddd;
}
.widget-menu {
  width: 400px;
  height: 100px;
  background-color: #555;
  position: absolute;
  top: 0;
  display: none;
}
.widget:hover .widget-menu {
  display: flex;
  /* used to ensure wrapping doesn't occur if the menu is wider than the widget container */
}
.widget:enabled .widget-menu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
  <div class="widget-menu">
    <button>Btn 1</button>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <p>Hover me to see menu appear. Then click the below button. Now my hovering is screwed up after the animation is complete.</p>
</div>

<br/>
<button>Fade In</button>

Answer 1

您需要使用 flex 激活 fadeIn:

$('.widget-menu').css('display', 'flex').hide(); // do this on doc ready or before you call the fadeIn

$('.widget-menu').fadeIn('slow'); // fade in will now use flex instead of block

Updated fiddle

更新

抱歉，您只是想让 fadeIn 与 flex 一起工作。如果您希望悬停在完成淡入后起作用，则需要在下次悬停时从菜单中删除样式

var menu = $('.widget-menu');
menu.css('display', 'flex').hide();
$('body > button').click(function() {
  menu.fadeIn('slow');
});

$('.widget').on('mouseover', function() {
  $(this).find('.widget-menu').hide();
})

New Fiddle