如何让鼠标悬停在一个div上时出现更多div？

Question

我正在尝试弄清楚如何在将鼠标悬停在一个 div 上时显示更多 div。

我知道如何在将鼠标悬停在同一 div 上时显示它的变化，但如何在将鼠标悬停在一个 div 上时显示更多 div？

以这个 CSS 为例：

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

.box:hover {
    background: #e6e6e6;
 height: 100px;
 width: 100px;  
}

http://jsfiddle.net/j4LFD/

如何才能使当您将鼠标悬停在该框上时，旁边会出现另一个框？

这可以用 CSS 完成还是需要 JavaScript 完成？

Answer 1

你可以用这样的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;  
}

检查这个示例http://jsfiddle.net/j4LFD/1/

Answer 2

据我所知，没有 Javascript 是不可能的，我建议使用 jQuery，因为它会让你的生活变得更轻松。如果你只想显示一个 div 那么你可以做类似的事情

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

然后在 JavaScript 中

$('#div1').mouseover(function(){
    $('#div2').show();
})
$('#div1').mouseout(function(){
    $('#div2').hide();
})

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

编辑：好的，看到sandeep的答案，这显然可以在CSS中实现，但是，这仍然是你在JS中的做法:-)

Answer 3

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

http://jsfiddle.net/samliew/j4LFD/4/

Answer 4

您还可以使用普通 Javascript（无 JQuery）来完成此操作，并且无需让您的元素成为相邻的同级元素。小提琴示例：http://jsfiddle.net/3nxfG/

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：

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

.hidden {
    visibility: hidden;
}

Answer 5

你可以伪造它，使用盒子隐藏第二个盒子，边框作为盒子，http://jsfiddle.net/j4LFD/3/