修改

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

你可以在完成fadein时取消绑定父链接的悬停事件。

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

Answer 3

这不是你问题的直接答案，而是暗示这是如何运作的。

为什么不将第二个<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>，你会没事的。

但对于那些菜单，我总是使用嵌套的无序列表结构，如下所示：

{{1}}

Answer 4

如上所述，在你悬停弹出窗口时取消绑定事件，然后在你徘徊时重新绑定它：

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 5

你可以试试这个：

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

Jquery得到两个div作为一个

5 个答案:

修改