悬停在一个div上时如何使更多的div出现？答案

【问题标题】：How to make more divs appear when hovering over one div?悬停在一个div上时如何使更多的div出现？
【发布时间】：2011-11-15 17:22:56
【问题描述】：

我正在研究如何在将鼠标悬停在一个 div 上时显示更多 div。

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

以此为例：

http://jsfiddle.net/j4LFD/

我怎样才能做到这一点，当您将鼠标悬停在框上时，旁边会出现另一个框？

我不确定这是否可以使用 css 或需要 javascript 来完成？

谢谢！

詹姆斯

【问题讨论】：

你需要什么是你的小提琴不能做的？

标签： javascript css html hover

【解决方案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/

【讨论】：

嘿，谢谢！正是我想要的！当时间限制结束时，我会把它作为最佳答案！
很好的答案。我在哪里可以找到关于 CSS 中所有不同的摇摇晃晃的东西的信息，比如 .box + .appear （你知道.. + 和 > 和等）。我知道文档在 W3C，但我没有在那里找到此信息

【解决方案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 中的做法 :-)

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

您也可以使用 vanilla 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;
}

【讨论】：

是的，但谁真的想在没有 jQuery 的情况下做事？ :p

【解决方案5】：

你可以假装，用box隐藏第二个box，用边框当box，http://jsfiddle.net/j4LFD/3/

【讨论】：