Question

我正在开发一个应用程序，我的页面中有很多区块，基本上都是div。我想修改div的悬停属性以扩大它。我目前的css是这样的：

 .livetile{
   height: 110px;
   margin: 5px;
   padding: 0px;
   width: 110px;
   position: absolute;
   transition:width 2s;
   -webkit-transition:width 2s;
  }

 .live-tile:hover{
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -moz-box-shadow: 0 0 3px 1px #fff;
   -webkit-box-shadow: 0 0 3px 1px #fff;
   box-shadow: 0 0 3px 1px #333;
 }

缩放效果似乎正常。但是，如果不是缩放，我尝试显式调整div的大小，如下所示：

 .live-tile:hover{
    width:200px;
    height:200px;
  }

然后将悬停的div周围的瓷砖重新定位以适应它。然而，我希望它能够在没有其他div被重新定位的情况下产生某种弹出效果。

换句话说，我不想只是缩放显示，我只是想改变div的尺寸，这样即使它与其他div重叠，它也只是来到前面而不会移动任何其他div。

我还尝试将悬停div的z-index设置为更高的整数值，但它似乎仍然没有做到这一点。我刚刚开始尝试CSS过渡和动画。非常感谢任何帮助。

修改我试图制作一个简单的js fiddle来说明我遇到的问题。我不希望其他div调整大小。我希望我能清楚地解释一下。

注意 - 我只想要CSS解决方案。我知道这可以使用Jquery来实现。

Answer 1

尝试在悬停效果上使用z-index。如果你想重叠其他项目，这应该有效...（必须设置位置！）

Answer 2

您可以增加#holder

的宽度（或）max-width属性

#holder{
max-width: 650px;
height: 160px;
display: block;
overflow: hidden;
position: relative;
z-index: 20;
}

点击此处：http://jsfiddle.net/vbYbY/

如何在不干扰CSS的其他div的情况下调整div的大小

2 个答案: