扩展所有div的一个div以在悬停时占据全宽

Question

我在彼此旁边编码了6个div

我怎样才能使一个div只展开以在悬停时占据包裹div的全宽度，其他5个div在底部到达完全展开的div

HTML：

<div class="row">

<div class="col-md-2" id="discuss_block">
div1.....
</div>

<div class="col-md-2" id="discuss_block">
div2.....
</div>

<div class="col-md-2" id="discuss_block">
div3.....
</div>

<div class="col-md-2" id="discuss_block">
div4.....
</div>

<div class="col-md-2" id="discuss_block">
div5.....
</div>

<div class="col-md-2" id="discuss_block">
div6.....
</div>

</div>

的CSS：

#discuss_block{
    background: #FFBC2F;
    color: #FFF;
    z-index: 30;
    top: 0px;

}

#discuss_block:hover{
 width:100%;  
}

Answer 1

您可以使用float:left http://jsfiddle.net/sfnxkav5/1/

#discuss_block{
width:50px;
float:left;
background: #FFBC2F;
color: #FFF;
z-index: 30;
top: 0px;
}