Jquery悬停-允许悬停在按钮悬停的另一个DIV上

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

本文关键字：悬停 按钮 另一个 DIV 许悬停 Jquery      更新时间：2023-09-26

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

目前，我可以让按钮显示菜单，但当我悬停在菜单上(并悬停在按钮上)，我失去了菜单。

下面是我的简单代码:Jquery在top:

$(".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或如果他们悬停在另一个按钮。但是我不太清楚该怎么做。

你需要在容器中包含菜单和按钮，并在容器上有一个悬停事件。这样，只要你把鼠标悬停在容器上，你的菜单就会显示出来。

这是你需要做的。像这样声明一个容器，菜单和按钮都在里面。

<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，有两个按钮

这是因为你不再悬停在按钮上，而是去到一个不同的元素"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>

只要光标在，菜单就会保持活动

出于各种原因，我不建议将此作为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())。

相关文章：