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

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.

you could unbind the hover-event for the parentlink on completion of the fadein.

    Popup.fadeIn(300, function() {
       $(ParentLink).unbind('hover');
    });

This is not a direct answer to your question but a hint how this could work.

Why don't you nest the the 2nd <div> into the first one, so the out will not occur?

<div id="ParentLink">
    <div id="Popup"></div>
</div>

Have #ParentLink { display: relative; } and #Popup { display: absolute; } and you will be fine.

But for those menu's I would always use a nested unordered list structure like this one:

<ul id="topLevel">
   <li id="level1item">
      <a href="">Link</a>
      <ul id="subLevel">
          <li>
             <a href="">Link 2</a>
          </li>
      </ul>
   </li>
</ul>

As said, unbind the event while you are hover the popup and then re-bind it when you are hovering out :

ParentLink.hover(
    handlerIn,
    handlerOut
);

var handlerIn = function()
    {
        Popup.fadeIn(300, popupFadeIn);
    };

var handlerOut = function()
    {
        Popup.fadeOut(400);
    };

var  popupFadeIn = function() {
       $(ParentLink).unbind('hover');
       $(this).mouseleave( function () {
           $(ParentLink).hover(
               handlerIn,
               handlerOut
          );
       });
};

btw, I didn't tested this

You can try this:

  var inn;
    $('ParentLink').hover(function() {
        inn = false;
        $('p').fadeIn(1000);
    },
    function() {
        $('Popup').bind('mouseenter mousemove',
        function() {
            inn = true;
        }).mouseout(function() {
            inn = false;
        });
        if (!inn) $('Popup').fadeOut(1000);
    });