When hovering over child element, parent element thinks I'm doing mouseleave()

This is clearly not the case though.

My JS :

$(".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();
  }
});

my HTML :

<div id="job_charge_2244" class="item-block job_charge">
          <div class="edit-and-delete right">
          </div>
</div>

The CSS :

.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

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 position: relative, but I have also placed it in block and it still has the same issue.

The parent div is in inline-block.