2

我正在开发一个应用程序，我的页面中有很多基本上是 div 的图块。我想修改 div 的 hover 属性来放大它。我当前的 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。

我还尝试将z-index悬停的 div 设置为更高的整数值，但它似乎仍然没有起到作用。我刚刚开始尝试 CSS 过渡和动画。任何帮助都深表感谢。

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

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

4

2 回答 2

2

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

于 2014-03-28T07:26:42.343 回答
0

您可以增加 #holder 的宽度（或）最大宽度属性

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

在这里检查：http: //jsfiddle.net/vbYbY/

于 2013-09-20T18:26:41.683 回答