我正在开发一个应用程序,我的页面中有很多图 block ,基本上都是 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 周围的图 block 会重新定位以容纳它。然而,我希望它出现在前面以产生某种弹出效果,而不需要重新定位其他 div。
换句话说,我不想只缩放显示,我只想更改 div 的尺寸,这样即使它与其他 div 重叠,它也只是出现在前面而不取代任何其他 div。
我还尝试将悬停 div 的 z-index
设置为更高的整数值,但它似乎仍然没有达到目的。我刚刚开始尝试 CSS 过渡和动画。非常感谢任何帮助。
编辑 我尝试做一个简单的js fiddle来说明我遇到的问题。我不希望其他 div 被调整大小。我希望我能清楚地解释自己。
注意 - 我只想要 CSS 解决方案。我知道这可以使用 Jquery 来实现。
最佳答案
尝试在悬停效果上使用 z-index。如果您想重叠其他元素,这应该可以工作...(必须设置位置!)
关于css - 如何在CSS中调整div的大小而不干扰其他div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18922983/