Guidance over the child element of the shooting

Question

In hoverIn - I want to add a box, move it up.

In hoverOut - the field should move down and then delete the field

In a simple list, it works fine, I can hang over a sliding element. But if I use an image, it causes a flicker effect when I try to hover over a sliding element.

• Work .
• Does not work .

Hover over items, then try hovering over the red box that appears. What is the difference here, am I missing something?

Also for related objects and similar cases do I need to use stopPropagation ? I can’t lower my head.

Answer 1

See the latest version of JsFiddle . I updated jQuery to select the elements a little differently, so now it should function the way you want.

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

Answer 2

img and div not parent / child. img cannot contain anything. You will need to give them a common parent. Perhaps a range or just use li , as in the first example.

See http://jsfiddle.net/tXJDQ/26/ for an example.

Answer 3

When you hang over whether it’s simple (a working example) and the window jumps under the mouse pointer ---> you still technically hang over li.

However, when you hang over img (not a working example), and the window jumps under the mouse pointer ---> you passively “hang” with the image.

In the second case, jquery sees that you are hanging (even if it is passive), and starts the hover out sequence.

You have two options (what I can think of) to solve this problem:

• put the image as the background for li.
• Create a div that will contain both the image and the field. then you must set the hoverin / hoverout effects for this parent div.