jquery: prevent div from hiding if mouse event occurred on another div

Question

i have this simple example here : http://jsfiddle.net/pTyvc/1/ i don't want the sub_menu div to slideUp if mouse is over it any help ? thanks

It doesn't collapse for me. Perhaps your browser doesn't like you. — pimvdb
– pimvdb, Commented Feb 15, 2012 at 14:12
he means if you move to the blue block. it does it for me too. — Teun Pronk
– Teun Pronk, Commented Feb 15, 2012 at 14:17
ya it's because the mouseleave so how to keep it showing till the sub_menu mouseleave — PHP User
– PHP User, Commented Feb 15, 2012 at 14:36

pimvdb · Accepted Answer · 2012-02-15 14:37:41Z

You'll have to use mouseover because mouseenter is not fired when you move from a child element to the parent element.

Also, when you mouseover a sub menu, you'll have to .stop() the animation to keep it from sliding up. The same applies for moving the mouse from the sub menu to the parent element.

http://jsfiddle.net/pTyvc/25/

$(".menu_item").mouseover(function(){ $(this).addClass("selected") .children().stop().slideDown(500); }); $(".menu_item").mouseout(function(e){ $(this).removeClass("selected") .children(".sub_menu").slideUp(500); }); $(".sub_menu").mouseover(function() { $(this).stop(); });

@Yasser: I see it actually starts acting weird if you move the mouseover the sub menu when it's sliding down. This seems a bit complicated.
Add '.animate({height:'100px'});' after 'stop()' in order the div will continue to slide down to the full height
@Hadas: Thanks, though it makes for some delay when hovering now.

Collectives™ on Stack Overflow

jquery: prevent div from hiding if mouse event occurred on another div

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related