Javascript 在鼠标输入/离开时显示/消失DIV

我正在尝试使用jQuery进行导航。我对jQuery非常陌生，所以我有点被困在这里

基本上，我要做的是当我将鼠标移到testbutton1上/下时，让testbutton2出现并隐藏。我能让这个和mouseenter一起工作/离开

我试图添加的部分是，当我将鼠标放在testbutton2上时，保持testbutton2可见，如果我将光标移回testbutton1上，则保持testbutton2可见-因此只淡入或淡出一次

您将从我的代码中看到我遇到的确切情况，并且可能会咯咯地笑

CSS

#testbutton1 {
float:left;
height:100px;
width:100px;
background:#69C;
}

#testbutton2 {
float:left;
height:100px;
width:100px;
background:#0C6;
display:none;
}

HTML

<div id="testbutton1"></div>
<div id="testbutton2"></div>

JSFiddle

---

您可以执行以下操作

$("#testbutton1").on({
    mouseenter: function () {
        $("#testbutton2").fadeIn();
    },
    mouseleave: function () {
        var $target = $("#testbutton2");

        //delay the fade out to see whether the mouse is moved to the second button
        var timer = setTimeout(function () {
            $target.stop(true, true).fadeOut();
        }, 200);
        $target.data('hoverTimer', timer);
    }
});
$("#testbutton2").on({
    mouseenter: function () {
        //if mouse is moved inside then clear the timer so that it will not get hidden
        clearTimeout($(this).data('hoverTimer'));
        $(this).stop(true, true).fadeIn();
    },
    mouseleave: function () {
        $(this).stop(true, true).fadeOut();
    }
});

---

演示：

我建议在您将鼠标悬停在按钮1或按钮2上时使用存储的状态变量

var isOver1 = false;
var isOver2 = false;

然后，向

mouseleave

和

mouseenter

添加条件，以设置隐藏或更改状态变量，例如：

 mouseleave: function() {
         isOver1 = false;
         window.setTimeout( function() {
             if (!isOver2) {
                 isOver2 = false;
                 $("#testbutton2").fadeOut();
             } 
         }, 50);

超时是必要的，因为如果您离开testbutton1，您就不会在同一时间输入testbutton2。因此，稍等一下就可以触发TestButton2Enter事件

以下是完整的演示：

离开button1到button2保留button2，离开back到button1仍然保留button2，将任何按钮朝着隐藏button2周围的空间

---

使用这种方法，您不需要停止动画，因为如果没有必要，动画也不会启动。

正如Arun p Johny所说，这可以通过计时器解决

但据我所知，你要做的是菜单。 您考虑过使用jQueryUI菜单小部件吗

---

或者您可以使用纯css来完成。 将两个按钮包装在较大的div中，仅当鼠标悬停在较大的div上时才显示第二个按钮：

#按钮：悬停div{
显示：块；
}

---

我不理解这种情况。光标进入testbutton1，然后testbutton2变为可见。好啊但如果您的光标离开testbutton1，testbutton2将消失，那么当您的光标位于testbutton2上时，testbutton2如何保持可见？因为为了浏览testbutton2，您必须离开testbutton1。testbutton1和testbutton2是否紧密接触，以确保它们之间没有间隙？请明确说明预期的内容。因此，我们可以帮助您。想象一个菜单+子菜单场景。我正在尝试创建一个带有子菜单的导航栏。所以我可以将光标放在菜单项1上，然后子菜单项1就会出现。将光标插入子菜单项1将使子菜单项1保持可见。这似乎正是我所需要的。我试着加上第三个按钮，看看是否能破译密码，然后它就全坏了。这让我对各地的程序员有了新的尊重。如果我从按钮1转到按钮2，这正是我所需要的。如果我从按钮2转到按钮1，它会再次开始淡入淡出（这确实是意料之中的）我已经编辑了我的解决方案：-）thx以获得提示。它现在有一个明确的事件浮动。

 mouseleave: function() {
         isOver1 = false;
         window.setTimeout( function() {
             if (!isOver2) {
                 isOver2 = false;
                 $("#testbutton2").fadeOut();
             } 
         }, 50);