How do I stop a mouseleave event when entering another element?

Question

How can I make it so that when I hover over one of my timeline items and navigate to the drop down menu, the mouseleave event will not fire and the menu will continue to display. Only when leaving both the menu and the timeline item do I want the menu to not display.

The mouseenter and mouseleave events are set on:

$(".trek_timeline_day .activity_link") 

Answer 1

Put the timeline and the menu into one div and register the events for the whole div. So something like this:

<div class="wholediv">
    <div class="timeline">...</div>
    <div class="menu">...</div>
</div>

and then:

$( '.wholediv'  ). etc.

Answer 2

I would recommend implementing some form of jQuery Menu Aim, similar to Ben Kaman's Amazonish smart menu - http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

Answer 3

If you put the .hover_info div inside the .activity_link (so there is one .hover_info inside each .activity_link), the mouseleave event will not get fired when you enter the .hover_info div because it's inside the .activity_link element.