Jquery 悬停 - 允许悬停在另一个 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 结构以使其正常工作class 像这样：

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

这是一个有 2 个按钮的 JSFIDDLE

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

Jquery Hover - allow hover on another DIV the appears on hover of a button

html

javascript

css

jquery

hover