Javascript 当鼠标悬停在一个div上时，如何显示更多div？

我正在尝试解决如何在悬停在一个div上时显示更多div

我知道当鼠标悬停在同一个div上时如何显示该div的更改，但当鼠标悬停在一个div上时如何显示更多div

以此为例:

当您将鼠标悬停在框上时，如何使其成为另一个框

我不确定这是否可以用css完成，或者需要javascript

谢谢

---

James

您可以使用css这样做：

.box , .appear{
 background: #151515;
 height: 100px;
 width: 100px;
    float:left;
}
.appear{
    background:red;
    display:none
}
.box:hover{
    background: #e6e6e6;
 height: 100px;
 width: 100px;  
}
.box:hover + .appear {
    display:block;  
}

---

检查一下这个例子

据我所知，没有Javascript是不可能的，我建议使用jQuery，因为它将使您的生活更加轻松。如果您只想显示一个div，那么您可以执行类似的操作

<div id="div1">First Div</div>
<div id="div2" style="display:none">Second Div</div>

如果您真的想在悬停时添加它，那么可以使用jquery.append（）函数(http://api.jquery.com/append/)

---

编辑：好的，看到sandeep的答案，这在CSS中是可能的，但是，在JS中仍然可以这样做：-）

CSS解决方案：使用父/容器div

---

您可以伪造它，使用框隐藏第二个框和框的边框，

您也可以使用香草Javascript（无JQuery）来实现这一点，而无需让元素相邻。小提琴示例：

html/js：

<div id="box1" class="box"></div>
<div id="box2" class="box hidden"></div>
<script type="text/javascript">
var box1 = document.getElementById('box1');
box1.onmouseover = function() {
    var box2 = document.getElementById('box2');
    box2.style.visibility = 'visible';
};
box1.onmouseout = function() {
    var box2 = document.getElementById('box2');
    box2.style.visibility = 'hidden';
};
</script>

---

你需要什么你的提琴不能做的？嘿，谢谢！正是我想要的！我会在期限结束时把它列为最重要的答案！回答得很好。我在哪里可以找到关于CSS中所有不同weebly-wobble内容的信息，比如.box+.execute（你知道，..和>和，等等）。我知道DOC在W3C，但我还没有在那里找到这些信息。是的，但是谁真的想在没有jQuery的情况下做事呢P

<div id="box1" class="box"></div>
<div id="box2" class="box hidden"></div>
<script type="text/javascript">
var box1 = document.getElementById('box1');
box1.onmouseover = function() {
    var box2 = document.getElementById('box2');
    box2.style.visibility = 'visible';
};
box1.onmouseout = function() {
    var box2 = document.getElementById('box2');
    box2.style.visibility = 'hidden';
};
</script>

.box {
 background: #151515;
 height: 100px;
 width: 100px;
 float: left;
}

.hidden {
    visibility: hidden;
}