jQuery-鼠标悬停时交换DIV

当鼠标悬停在div上时，是否可以执行交换或显示/隐藏

例如，假设我有两个div：

<div id="box1">content of box 1</div>
<div id="box1-hover">you are hovering on this box</div>

框1的内容
您正在该框上悬停

框1应显示在页面上，框1悬停隐藏，然后，当您将鼠标悬停在框1上时，框1悬停应在其顶部可见（因此它基本上看起来像交换）。然后，当您将鼠标移出时，box1 hover将再次隐藏

这可以吗？如果是这样，有人能用JSFIDLE演示一下吗

谢谢

---

扎克

当然。您将要调查、和。下面的代码应该可以帮助您完成大部分任务

$(document).ready(function() {
    $("#box1").mouseenter(function() {
        $("#box1-hover").show();
    }).mouseleave(function() {
        $("#box1-hover").hide();
    });
});

对于CSS，您需要理解和理解。Z索引表示元素在页面中的“高”程度（可以将事物想象为向您走来）。相对定位项中的绝对定位项绝对定位在父项而不是页面上

CSS需要：

#box1 {
    z-index: 2;
    float: left;
    position: relative;
}

#box1-hover {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

请注意，在本例中，

box1 hover

的div嵌套在

box1

中

---

当然可以。您将要调查、和。下面的代码应该可以帮助您完成大部分任务

$(document).ready(function() {
    $("#box1").mouseenter(function() {
        $("#box1-hover").show();
    }).mouseleave(function() {
        $("#box1-hover").hide();
    });
});

对于CSS，您需要理解和理解。Z索引表示元素在页面中的“高”程度（可以将事物想象为向您走来）。相对定位项中的绝对定位项绝对定位在父项而不是页面上

CSS需要：

#box1 {
    z-index: 2;
    float: left;
    position: relative;
}

#box1-hover {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

请注意，在本例中，

box1 hover

的div嵌套在

box1

中

看：

看：

---

很抱歉，我解释得不太清楚-当显示框1悬停时，它应该在第一个框的顶部，在同一个空间。@Zach-是的，当你留下评论时，我意识到了这一点。我已经编辑了我的小提琴，并在这里添加了所需的代码。非常感谢。我正在学习jQuery，因为我们在说，所以这个帮助是无效的！很抱歉，我没有解释清楚-当显示框1悬停时，它应该在第一个框的顶部，在同一个空间。@Zach-是的，当你留下评论时，我意识到了这一点。我已经编辑了我的小提琴，并在这里添加了所需的代码。非常感谢。我正在学习jQuery，因为我们在说，所以这个帮助是无效的！