Jquery получает два div, чтобы действовать как один

Question

У меня есть следующий код для моего всплывающего меню, родительская ссылка - ссылка верхнего уровня.Это вызывает всплывающее окно, чтобы показать.Всплывающее окно исчезает и исчезает, когда мышь входит и выходит из родительской ссылки.

Однако мне нужно, чтобы оно не исчезало во всплывающем окне, если мышь находится над всплывающим окном!В данный момент, как только мышь входит во всплывающее окно, она исчезает.Мне нужно, чтобы оба div'а действовали как один для парения, если это имеет смысл!

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

Answer 1

Вы должны вкладывать всплывающее окно в родительский элемент. Таким образом, когда вы перемещаете мышь от родителя к всплывающему окну, родитель все равно будет находиться в состоянии наведения мыши, потому что всплывающее окно наведения мыши всплывает над родителем. Когда мышь находится за пределами родительского элемента (плюс его дочерние элементы), событие родительского указателя мыши срабатывает для родительского элемента.

Редактировать

Если вы не можете (или хотите) изменить разметку, можно переместить элементы в рекомендуемые позиции с помощью jQuery, например:

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

Скорее всего, вам придется изменить свой CSS, чтобы он соответствовал изменениям, так что вы можете подумать сначала.

Answer 2

Вы можете попробовать это:

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

Answer 3

Как уже говорилось, отсоедините событие, когда вы наводите всплывающее окно, а затем повторно свяжите его, когда вы зависаете:

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

Кстати, я не проверял это

Answer 4

Это не прямой ответ на ваш вопрос, а подсказка, как это может работать.

Почему бы вам не вставить 2-й <div> в первый, чтобы out не возникло?

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

Имейте #ParentLink { display: relative; } и #Popup { display: absolute; }, и все будет хорошо.

Но для этих меню я всегда использовал бы структуру вложенного неупорядоченного списка, подобную этой:

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

Answer 5

вы можете отменить привязку к hover-событию для родительской ссылки после завершения fadein.

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