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

Question

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.

Answer 1

The mouseenter and mouseleave events are specifically designed to handle this situation correctly. When you enter a child element, there is no mouseleave event triggered for the parent, provided that the child element actually is inside the parent element.

When I try your code, it doesn't trigger the mouseleave event when I hover the child element:

http://jsfiddle.net/baCsd/

I think that you have something in your code that actually places the child element outside the parent element, and that's why the mouseleave event is triggered.

For example, if there is no content in the parent element it's only the padding that gives it height, so it's only 15px high, and the position: relative; top: 25px; could place the child element below the bottom of the parent element.