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');

我的意思是为什么我们已经在父级上进行mouseout事件时为什么需要检查“ item：hover”

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：很抱歉，这不是咖啡脚本。

jQuery显示并在悬停时输入div

2 个答案: