Javascript jQuery在悬停时显示并输入div

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

当我将鼠标悬停在

js expand

上以显示

js am content

时，我尝试这样做；当

mouseout

悬停在

菜单栏项上时，如果
菜单栏项
未悬停，但内容未隐藏，我尝试将其隐藏

这是我的简化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>

你为什么不试试这个呢：

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

我的意思是，当我们已经在父对象上执行鼠标移出事件时，为什么我们需要检查“item:hover”呢

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

我的意思是，当我们已经在父对象上生成mouseout事件时，为什么我们需要检查“item:hover”
如果可以将事件处理程序添加到父对象
中，请尝试此操作

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

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

PS：很抱歉，这不是coffee脚本。
如果可以将事件处理程序添加到父脚本中，请尝试此操作

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

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

PS：很抱歉，这不是coffee脚本。
您可以添加整个html以便在JSFIDLE中准备用例，还是可以为此提供JSFIDLE？您可以添加整个html以便在JSFIDLE中准备用例，还是可以为此提供JSFIDLE？我试过了，但是当我用鼠标移动到下一个菜单项时，整个列表就消失了。我用你写的代码制作了一个视频，下面是它的样子：视频不可用，我的朋友对不起，它是私人的。现在它是可用的。我试过了，但是当我用鼠标移到下一个菜单项时，整个列表就消失了。我用你写的代码制作了一个视频，下面是它的样子：视频不可用，我的朋友对不起，它是私人的。现在有了。