title: How to disable mouseout events triggered by child elements?
body: <p>Let me describe the problem in details:</p>
  
  <p>I want to show an absolute positioned div when hovering over an element. That's really simple with jQuery and works just fine. But when the mouse goes over one of the child elements, it triggers the mouseout event of the containing div. How do I keep javascript from triggering the mouseout event of the containing element when hovering a child element. </p>
  
  <p>What's the best and shortest way to do that with jQuery?</p>
  
  <p>Here is a simplified example to illustrate what I mean:</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;a&gt;Hover Me&lt;/a&gt;
  &lt;div&gt;
    &lt;input&gt;Test&lt;/input&gt;
    &lt;select&gt;
      &lt;option&gt;Option 1&lt;/option&gt;
      &lt;option&gt;Option 2&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript/jQuery:</p>
  
  <pre><code>$('a').hover( function() { $(this).next().show() }
                function() { $(this).next().hide() } );
  </code></pre>