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/

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/）

编辑：在CSS中可以清楚地看到sandeep的答案，但是，这仍然是你在JS中做到的： - ）

Answer 3

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

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

Answer 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;
}

Answer 5

您可以伪造它，使用该框隐藏第二个框并将边框隐藏为框http://jsfiddle.net/j4LFD/3/

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

5 个答案: