0

I am trying to verify if a html element is not being hoverover (i mean when mouse leaves that div) in order to hide another element. The problem is that the element i need to check the status is generated dynamically for another third party library and it can be duplicated. The html looks like this: Just one of them is visible at a time 

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

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

So i was trying to do something like this:

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

but because there are multiple instances of the div the is(':hover') trigger an exception .

So i thought about something like this to try to get the div which is visible then verify if it is being hoverover:

var a = $('.jqx-menu-popup:visible')

if (!a.is(':hover')) {                  
    $('#' + 'jqxmenu' + elementHover).jqxMenu('close');
}

but base on jquery documentation "Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout"

Any ideas how can i achieve what i want?

Nick
  • 565
  • 4
  • 19
D.B
  • 4,009
  • 14
  • 46
  • 83

1 Answers1

0

I would recommend looping over each of the elements with .each() (regardless of whether they start off hidden or not), and attaching a mouseout event handler (which can be done through jQuery's .on() method). This would search the .siblings() (or similar) and set the visibility to visibile, while optionally setting the current element to hidden.

$('.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>

Note that if the element is dynamically generated, you'll have to hoist the scope and make use of event delegation, which can be done by attaching the mouseout to an element that exists on DOM load instead of .jqx-menu-popup, with something like:

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

If you need to find out which elements are currently visible, you can use:

if ($(this).css('visibility', 'visible')) { }
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • my issue is that i am trying to check if one of those 2 ".jqx-menu-popup" is visible and if i am hoverovering that visible ".jqx-menu-popup" but from the mouseout event of another html element For instance $("#anotherelement").on({ mouseleave: function () { //check here if there is one of those guys visible and being hoverover var a = $('.jqx-menu-popup:visible') if (!a.is(':hover')) { $('#' + 'jqxmenu' + elementHover).jqxMenu('close'); } } }); – D.B Mar 04 '19 at 02:35