html - 在悬停时调整大小时显示一个 div

Question

我有一些固定宽度和高度的 div 并排排列在一起。我想增加悬停时的宽度和高度，但将结果 div 显示在其他 div 上而不将它们发送到下一行

我怎么能用 css 做到这一点？

我的 HTML：

<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>

我的CSS：

.box{
   float:right;
   width:173px;
   height:173px;
}

.box:hover{
   width:220px
   height:220px;    
}

Answer 1

你在找这样的东西吗？

.box{
   float:right;
   width:173px;
   height:173px;
   margin-top:10px;
}

.box:hover{
   width:220px;
   height:220px;    
   margin-left:-47px;
   position:relative;
}

编辑：@malcom 选择的 CSS 示例：

.box{
   float:right;
   width:200px;
   height:200px;
   margin-top:10px;
    background-color:grey;
    border:1px solid;
    margin-top:30px;
}

.box:hover{
   width:250px;
   height:250px;    
   margin-left:-25px;
   position:relative;
    margin-right:-25px;
    margin-top:5px;
    transition:all 200ms ease-in-out 0s;
}

http://jsfiddle.net/jxvN6/1/