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

Question

This is clearly not the case.

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> 

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 went bananas. When I click on the links in my inner div, it immediately launches the mouse delete function and they hide. This div is naturally in position: relative , but I also placed it in block , and it still has the same problem.

Parent div is inline-block .

Answer 1

It is possible that the child is set to float , and your parent is actually smaller than you expected. Try to either remove the float or put overflow: auto on the parent ...

Answer 2

The mouseenter and mouseleave specifically designed to handle this situation correctly. When you enter a child, the mouseleave event does not mouseleave for the mouseleave , provided that the child is actually inside the parent.

When I try to execute the code, it does not raise the mouseleave event when I wrap the child on:

http://jsfiddle.net/baCsd/

I think you have something in your code that actually places the child outside the parent, and therefore the mouseleave event is mouseleave .

For example, if there is no content in the parent element, this is only an addition that gives it height, so it is only 15px high, and position: relative; top: 25px; position: relative; top: 25px; can place a child below the bottom of the parent.

Answer 3

try this instead .. it is basically the same, but using .hover, which is a combined function of mouseenter and mouseleave. Also, he has no error with the exit of the parent when entering it.

 $(".job_charge.item-block").hover(function(){ $(this).children(".edit-and-delete").fadeIn(); }, function(){ $(this).children(".edit-and-delete").fadeOut(); }); 

http://jsfiddle.net/YWRRZ/4/ <- link to my script where you can test it