从重复的HTML元素中可以看到一个元素，并检查是否悬停 - jQuery

Question

我正在尝试验证是否没有避开HTML元素（我的意思是鼠标离开该div时）以隐藏另一个元素。问题在于，我需要检查状态的元素是为另一个第三方库的动态生成的，并且可以重复。HTML看起来像这样：一个时候只能看到其中一个

<div class="jqx-menu-popup jqx-menu-popup" style="visibility: hidden;">
  .... 
</div>
<div class="jqx-menu-popup jqx-menu-popup" style="visibility: visible;">
  .... 
</div>

所以我试图做这样的事情：

if (!$('.jqx-menu-popup').is(':hover')) 
{                
    $('#' + 'jqxmenu' + elementHover).jqxMenu('close');
}

但是，由于div有多个实例（'：hover'）触发了例外。

所以我想到了这样的事情来尝试获得可见的DIV，然后验证它是否避开：

var a = $('.jqx-menu-popup:visible')
if (!a.is(':hover')) {                  
    $('#' + 'jqxmenu' + elementHover).jqxMenu('close');
}

但基于jQuery文档"具有可见性的元素：隐藏或不透明度：0被视为可见，因为它们仍然在布局中消耗空间"

有什么想法我该如何实现我想要的？

Answer 1

我建议使用.each()在每个元素上循环循环（无论它们是否隐藏起来），并连接mouseout事件处理程序（可以通过JQuery的.on()方法完成）。这将搜索.siblings()（或类似）并将visibility设置为visibile，而将当前元素设置为隐藏。

$('.jqx-menu-popup').each(function() {
  $(this).on('mouseout', function() {
    $(this).css('visibility', 'hidden'); // optional
    $(this).siblings('.jqx-menu-popup').css('visibility', 'visible');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="jqx-menu-popup jqx-menu-popup" style="visibility: hidden;">One</div>
<div class="jqx-menu-popup jqx-menu-popup" style="visibility: visible;">Two</div>

请注意，如果元素是动态生成的，则必须提起范围并利用事件委托，可以通过将mouseout附加到DOM负载上的元素而不是.jqx-menu-popup，而使用类似的东西来完成。：

$('document').on('mouseout', '.jqx-menu-popup', function() { ...

如果您需要找出当前可见的元素，则可以使用：

if ($(this).css('visibility', 'visible')) { }