如何在不干扰css中的其他div的情况下调整div的大小
如何在不干扰css中的其他div的情况下调整div的大小
提问于 2013-09-20 17:57:06
我正在开发一个应用程序，在这个应用程序中，我的页面中有很多瓷砖，基本上都是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小提琴来说明我遇到的问题。我不想其他的div被调整大小。我希望我能清楚地解释自己。
注意-我只想要CSS解决方案。我知道这可以使用Jquery实现。
回答 2
Stack Overflow用户
发布于 2014-03-28 07:26:42
尝试使用z-指数的模具悬停效果。如果您想要重叠其他项目，这应该是有效的.(位置必须设置！)
Stack Overflow用户
发布于 2013-09-20 18:26:41
可以增加#holder的宽度(或)最大宽度属性。
#holder{
max-width: 650px;
height: 160px;
display: block;
overflow: hidden;
position: relative;
z-index: 20;
}检查这里：http://jsfiddle.net/vbYbY/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18922983
复制相关文章
相似问题
腾讯云开发者
