CODEWITHSUNDEEP
jqueryhover
Neo
Neo

Reputation: 1037

Hovering over child element firing mouse out

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.

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.

Upvotes: 6

Views: 1271

Answers (3)

rantebi
rantebi

Reputation: 61

When you are hovering over the simple li (working example) and the box slides up under your mouse pointer ---> you are still technically hovering over the li.

However, when you are hovering over the img (not working example) and the box slides up under your mouse pointer ---> you are being passively 'hovered out' of the image.

In the second case jquery sees that you have hovered out (even if it's passively), and begins the hover out sequence.

You have two options (That I can think of) to resolve this:

  1. put the image as background to the li.
  2. Create a div that'll contain both the image and the box. then you must set hoverin/hoverout effects on that parent div.

Upvotes: 0

Josh Jones
Josh Jones

Reputation: 174

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

    });

});

Upvotes: 1

James Montagne
James Montagne

Reputation: 78630

The img and the div are not a parent/child relationship. An img can't contain anything. You will need to give them a common parent. Perhaps a span, or just use the li like you are in your first example.

See http://jsfiddle.net/tXJDQ/26/ as an example of such.

Upvotes: 0

Related Questions