Hovering over child element firing mouse out

Question

On hoverIn - I want to append a box, slide it up.

On hoverOut - box should slide down and then remove the box

On a simple list it works perfectly, I can hover over the sliding element. But if I'm using an image, it causes a flicker effect when I try hover over the sliding element.

• Working.
• Not working.

Hover over the elements then try mouse the cursor on the red box that appears. What's the difference here, am I missing something?

Also for related objects and similar cases, do I need to use stopPropagation? Can't get my head around it.

Answer 1

See the most recent version of your JsFiddle. I updated the jQuery to select the elements slightly differently, so now it should function the way you want it to.

$('#aaa li').hover(function(){
    $(this).append('<div id="box"></div>'); 
    $(this).children('div').stop().animate({
        bottom:'0px'
    },{
    queue:false,duration:350
    });       
}, function() {  
    $(this).children('div').stop().animate({
        bottom:'-53px'
    },{
        queue:false,duration:300,complete:function() {
            $(this).children('div').remove(); 
        }

    });

});