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

Question

我试图找出如何在悬停在一个div上时显示更多div.

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

以此为例:

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/