title: When hovering over child element, parent element thinks I'm doing mouseleave()
body: <p>This is clearly not the case though.</p>
  
  <p>My JS :</p>
  
  <pre><code>$(".job_charge.item-block").live({
    mouseenter: function(){
      $(this).find('.edit-and-delete').stop(true,true).fadeIn();
    },
    mouseleave: function(){
      $(this).find('.edit-and-delete').stop(true, true).fadeOut();
    }
  });
  </code></pre>
  
  <p>my HTML :</p>
  
  <pre><code>&lt;div id="job_charge_2244" class="item-block job_charge"&gt;
            &lt;div class="edit-and-delete right"&gt;
            &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS :</p>
  
  <pre><code>.item-block.job_charge
    border-bottom: 1px dotted #ccc
    display: inline-block
    padding-bottom: 15px
    width: 650px
  
    .edit-and-delete
      position: relative
      display: none
      top: 25px
      right: 5px
      float: right
      a
        margin-right: 8px
  </code></pre>
  
  <p>I've gone bananas. When I mouse over the links in my inner div, then immediately, it triggers a mouse-leave function and they hide. This div is naturally in <code>position: relative</code>, but I have also placed it in <code>block</code> and it still has the same issue.</p>
  
  <p>The parent div is in <code>inline-block</code>.</p>