title: Ignore mouse events for overlapping divs
body: <p>A page has 4 divs:</p>
  
  <ol>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
  <li>Details (hidden)</li>
  </ol>
  
  <p>The desired effect is that the Details box will be shown when hovering over the Item box, and be hidden once moused out. The Details box will overlap with about 20% of the right of the Item box when it is shown.</p>
  
  <p>However, the current erroneous effect I'm getting is that when I hover just on the right edge of any of the Item boxes, it goes into a forever loop of showing and hiding the Details box. Presumably this is because it's triggering the mouseout event of the Item box (when Details gets displayed) but immediately triggering the mouseover event again when the Details box is hidden. I'd like to know how to get around this.</p>
  
  <p>My current code is:</p>
  
  <pre><code>$('div.item').hover(
      function() {
          $(this).showDetails();
      },
      function() {
          $(this).hideDetails();
      }
  );
  </code></pre>
  
  <p>Thanks in advance for any pointers!
  Here's the jsfiddle link for anyone that can't visualize it. Try hovering over the Item boxes on the right side, and move the mouse a little and you will see the flicker occuring.</p>
  
  <p><a href="http://jsfiddle.net/s6CjP/1" rel="nofollow">http://jsfiddle.net/s6CjP/1</a></p>
  
  <p>Xavier, I've already tried appendTo for the details box, but the effect I want is that I want to have the mouse events only targeted to the actionable div (namely, Item). After some research I'm even quite sure if this is possible since the Details box is covering the div (and thus not able to attach an event to something below it)</p>