Question

I have the following code for my popup menu, the parent link is the top level link. It causes a popup to show. Popup fades in and fades out when the mouse enters and exits parent link.

However, I need it to not fade out the popup, if the mouse is over the popup! At the moment, as soon as the mouse enters the popup it fades it out. I need both divs to act as one for the hover, if this makes any sense!

// Hovering over the parent <li>
ParentLink.hover(
    function()
    {
        Popup.fadeIn(300, function() {
        });
    },
    function()
    {
        Popup.fadeOut(400, function() {
        });
    }
);

Answer 1

You should nest the popup inside the parent. This way when you move the mouse from the parent to the popup, the parent will still be in a mouse-over state because popup’s mouse-over event is bubbled onto the parent. When the mouse is out of the parent (plus its children), mouse-out event will fire on the parent.

Edit

If you are not able to (or want to) change the markup, one possibility is to move the elements to the recommended positions using jQuery, like:

ParentLink.append(Popup); // moves the Popup element from its current position
                          // and places it as the last child of ParentLink

Most probably you’ll have to modify your CSS to match the changes so you may want to think first.