Есть ответы на вопрос, как отображать 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')