Jquery Hover - 允许悬停在另一个 DIV 上，出现在按钮悬停时

Question

我有一个有 4 个按钮的主页。将鼠标悬停在按钮上时，按钮后面会出现一个菜单。当您将鼠标悬停在另一个按钮上时，会出现一个不同颜色的菜单。

目前，我可以获得显示菜单的按钮，但是当我将鼠标悬停在菜单上（并悬停在按钮上）时，我会丢失菜单。

这是我的简单代码： Jquery 在顶部：

$(".mybutton").hover(
    function () {
        $(".mybox").fadeIn();

    },
    function () {
        $(".mybox").fadeOut();
    }
);

$(".mybutton2").hover(
    function () {
        $(".mybox2").fadeIn();

    },
    function () {
        $(".mybox2").fadeOut();
    }
);

还有我的 HTML：

<div class="mybox">
  <div style="position: absolute;">
   <a href="#">Item 1</a>
   <a href="#">Item 2</a>
</div>
</div>

<div class="buttons">
<div class="mybutton">
    /* Button image here */
</div>

<div class="mybutton2">
    /* Button 2 image here */
</div>
</div>

所以我需要一些方法来保持悬停时淡入淡出的框处于活动状态。我正在考虑不为淡出进行回调，并且以某种方式仅在它们淡出 .mybox DIV 或将鼠标悬停在另一个按钮上时才进行淡出。但我有点不清楚如何做到这一点。

提前致谢。

Answer 1

这是因为您不再将鼠标悬停在按钮上，而是转到不同的元素“mybox”，因此您可以通过将菜单保留在按钮类中来重新排列 html 结构以使其正常工作：

<div class="buttons">
    <div class="mybutton">

        /* Button image here */

        <div class="mybox">
            <div style="position: absolute;">
                <a href="#">Item 1</a>
                <a href="#">Item 2</a>
            </div>
        </div>

    </div>
</div>

只要光标在其中，这应该保持菜单处于活动状态。

Answer 2

出于各种原因（其中之一是实现它的复杂性），我不推荐将其作为 UI 设计模式；您可以考虑更改它，以便在用户单击时显示菜单。

话虽如此，这里有一种方法。摆脱现有的fadeOut() 调用并添加以下内容：

$("body").on("mousemove", function(e) {
     var $hovered = $(e.target);
     var $myButton = $(".myButton");
     var $box = $(".myBox");
     if ( $hovered.is( $myButton ) ) return;
     if ( $hovered.is( $box ) ) return;
     if ( $.contains( $box.get(0), $hovered ) ) return;
     $box.fadeOut();
});

...和 ​​button2 类似。基本原理是这样的 - 每当鼠标移动时，我们检查鼠标是否悬停在按钮、框或框中包含的元素上（使用$.contains()）。如果没有，我们隐藏该框。

Answer 3

您需要在容器中包含菜单和按钮，并在容器上设置悬停事件。这样，只要您将鼠标悬停在容器上，您的菜单就会可见。

这是您需要做的。 用你的菜单和按钮声明这样的容器。

<div id='container'>
    <div class="mybox box">
        <div style="position: absolute;">
            <a href="#">Item 1</a>
            <a href="#">Item 2</a>
        </div>
    </div>

    <div class="buttons">
        <div class="mybutton">
            /* Button image here */
        </div>
    </div>
</div>

这是您需要在 jquery 中执行的操作。

$(document).ready(function() {
    $("#container").hover(
        function() {
            console.log($(".mybox").fadeIn());
            $(".mybox").fadeIn();

        },
        function() {
            $(".mybox").fadeOut();
        }
    );
});

这是一个有效的 JSFIDDLE，有 2 个按钮