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>

所以我需要一些方法来保持盒子在盘旋时保持活跃状态。我正在考虑不对fadeout进行回调，并且如果它们淡出.mybox DIV或者如果它们悬停在另一个按钮上，则会以某种方式进行淡出。但是我对如何实现这一点有点不清楚。

提前致谢。

Answer 1

您需要在容器中包含菜单和按钮，并在容器上放置悬停事件。这样，只要您将菜单悬停在容器上，您的菜单就会显示。

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

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

这是一个有效的 https://github.com/google/guice/wiki/ProviderBindings ，带有2个按钮

Answer 2

这是因为你不再徘徊在按钮上而是转到另一个元素＆＃34; mybox＆＃34;所以你可以通过将菜单保持在按钮类中来重新排列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 3

由于各种原因（其中一个是实现它的复杂性），我不建议将其作为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()）。如果没有，我们会隐藏这个框。

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

3 个答案: