title: jQuery mouseover ignore empty space between elements
body: <p>How can i say with jQuery mouseover to ignore the empty Space between elements, so the mouseover is still active on an element which is positioned outside of the parent element?</p>
  
  <p>Here's a snippet. The <strong>yellow</strong> list should be active on mouseover and still active if i go to this list. Currently the mouseout is of course fired if i want to go the the <strong>yellow</strong> list.</p>
  
  <p>The yellow list should be hided if i leave the yellow list and the current link of the blue list.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("ul &gt; li")
    .mouseover(function() {
      $(this).addClass('active').has('ul').addClass('has-children');
      if($(this).hasClass('has-children')){
        $(this).find('ul').first().addClass('visible');
      }
  })
    .mouseout(function() {
      $(this).removeClass('active');
      $(this).has('ul').removeClass('has-children visible');
      $(this).find('ul').removeClass('visible');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background:red;
  }
  
  div {
    position:relative;
  }
  
  ul {
    background:blue;
    color:white;
    padding:10px;
  }
  
  div &gt; ul {
    position:absolute;
    left:0;
  }
  
  div ul &gt; li &gt; ul {
    position:absolute;
    left:200px;
    top:0;
    display:none;
  }
  
  .visible {
    display:block;
  }
  
  li.active ul {
    background:yellow;
    color:black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;
    &lt;ul&gt;
      &lt;li&gt;Link 1
        &lt;ul&gt;
          &lt;li&gt;Link 2&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;Foo&lt;/li&gt;
      &lt;li&gt;Bar&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>