title: How to make menu container hide when hovering all but two elements?
body: <p>So I'm building a small "UberMenu" feature for my main menu, and it works almost as I want, except that I want the UberMenu container to hide if the mouse is not over either </p>
  
  <p>1) the UberMenu button, or </p>
  
  <p>2) the UberMenu container</p>
  
  <p>Right now, if you hover over the UberMenu button, the container shows up, and if you enter the UberMenu container, and then proceed to hover over another menu item, it hides. </p>
  
  <p>This is what I want, however if I hover the UberMenu button, <strong>and then immediately</strong> hover over another menu item, the container remains open. </p>
  
  <p>I've tried over a dozen different snippets, but I haven't found a solution.  </p>
  
  <p>I guess I need some if / else statement added to the code? </p>
  
  <p>Can someone give me some guidance here? Much appreciated! :-)</p>
  
  <p><strong>This is the code I used:</strong></p>
  
  <pre><code>//When mouse hovers UberMenu button, Show Container
  $(".uber-menu-test").hover(function(e) {
  e.preventDefault(); //To prevent default anchor tag behaviour
  e.stopPropagation(); //To prevent parent container click event from firing
  
  $(".uber-menu-frame").show(800);
  });
  
  // If mouse hovers either the content area or the navbararea, hide UberMenu    container again
  $(".block-type-content, .navbararea").mouseenter(function() {
  $(".uber-menu-frame").hide(800);
  
  });
  </code></pre>