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/

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

1 个答案: