悬停时显示并输入jQuery

Question

当鼠标悬停在另一个div上时，如何显示另一个div是有答案的，但在我的示例中，我需要将鼠标悬停在一个显示菜单栏项目列表的锚定标记上，然后将鼠标悬停在该菜单栏项目列表上。在那之后，当我用鼠标移出输入的列表时，列表应该会隐藏起来。问题是，当我将鼠标悬停在菜单栏列表之外时，它并没有消失。

当将鼠标悬停在js-expand上以显示js-am-content时，以及当mouseout悬停在menu-bar-item上时，如果menu-bar-item未悬停，则会隐藏内容，但内容不会隐藏。

这是我的简化HTML

<div>
  <a class="expand js-expand fa fa-bars"></a>
  <div class="action-menu-content js-am-content">
    <a class="menu-bar-item"> SHOW </a>
    <a class="menu-bar-item"> EDIT </a>
    <a class="menu-bar-item"> COLLECTIVE </a>
    <a class="menu-bar-item"> PER ORDER </a>
    <a class="menu-bar-item"> CUSTOMS </a>
    <a class="menu-bar-item"> HISTORY </a>
  </div>
</div>

和jQuery (咖啡脚本)

$(document).on 'mouseover', '.js-expand', (event) =>
  $parent = $(event.currentTarget).parent()
  $parent.children(".js-am-content").slideToggle('fast')

$(document).on 'mouseout', '.menu-bar-item', (event) =>
  if !$('.menu-bar-item:hover') 
    $('.js-am-content').fadeOut('fast')

Answer 1

你为什么不试试这个：

 $(document).on 'mouseout', '.menu-bar-item', (event) =>
    $('.js-am-content').fadeOut('fast');

我的意思是，为什么我们需要检查"item:hover“，而我们已经在父级上做了mouseout事件

Answer 2

如果可以将事件处理程序添加到父<div>，请尝试这样做。

$(".parentdiv").hover(
    function(event) {
      $(event.currentTarget).children(".js-am-content").fadeIn("fast");
    }, function(event) {
      $(event.currentTarget).children(".js-am-content").fadeOut("fast");
    }
  );

如果您无法将处理程序添加到父进程中，请告诉我，我将尝试其他方法。

PS:很抱歉，这不是咖啡脚本。