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

Question

我正在尝试使用 jQuery 进行导航。我是 jQuery 的新手，所以我有点卡在这里。

基本上，我要做的是让 testbutton2 在我将鼠标悬停在 testbutton1 上时出现和隐藏。我能够让它与 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/