Question

我正在尝试使用jQuery进行导航。我对jQuery很新，所以我在这里遇到了一点困难。

基本上我试图做的是当我鼠标上/下testbutton1时出现并隐藏testbutton2。我能够通过mouseenter / leave来使用它。

我试图添加的部分是当我将鼠标悬停在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>

的jQuery

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

});
$("#testbutton2").on({
     mouseenter: function() {
         $("#testbutton2").fadeIn();
     },
     mouseleave: function() {
         $("#testbutton2").fadeOut();
     },

});

的jsfiddle

DEMO

Answer 1

或者你可以用纯css来做。将两个按钮包裹在一个较大的div中，并仅在鼠标悬停在较大的div上时显示第二个按钮：

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

#buttons:hover div {
    display:block;
}

http://jsfiddle.net/r267b/1/

Answer 2

您可以执行类似

的操作

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

演示：Fiddle

Answer 3

如果您将鼠标悬停在button1或button2上，我建议使用存储的状态变量。

var isOver1 = false;
var isOver2 = false;

然后，向mouseleave和mouseenter添加条件以设置隐藏或更改状态变量，例如：

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

超时是必要的，因为如果你离开testbutton1，你就不会在同一时间进入testbutton2。所以等待一下就可以触发testbutton2进入事件。

以下是完整演示：

http://jsfiddle.net/KTULJ/2/

将按钮1保持为按钮2保持按钮2，然后返回按钮1仍保持按钮2，将任何按钮留在隐藏按钮2周围的空间。

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

Answer 4

这是由定时器解决的，正如Arun P Johny所说......

但就我所见，你想要做的就是菜单。您是否考虑过使用jQuery UI菜单小部件？

http://jqueryui.com/menu/

鼠标进入/离开时DIV出现/消失

4 个答案: