When hovering over child element, parent element thinks I'm doing mouseleave()
<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>
