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

时间:2013-08-03 00:10:41

标签: html css resize hover position

我有一些固定宽度和高度的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;    
}

1 个答案:

答案 0 :(得分:2)

你正在寻找这样的东西吗?

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