Ich habe ein JSFiddle erstellt, um dieses Problem zu reproduzieren.
Ich versuche, ein Rasterelement beim Schweben wachsen zu lassen, aber es verursacht dieses seltsame Problem, wenn es unter ein anderes Rasterelement geht und dann so springt, wie ich es erwartet habe.
Warum passiert das? Gibt es eine Lösung?
.container { height: 100vh; width: 100vw; display: grid; grid-template: 1fr / 1fr 1fr; margin: 1em; grid-gap: 1em; } .box { height: 100%; width: 100%; transition: width 0.5s; } .one { background: pink; } .two { background: red; } .box:hover { width: 60vw; }
我写了一篇关于这种效果的详细文章,我邀请您阅读以了解如何使用 CSS 网格实现这种效果:https://css-tricks.com/zooming-images-in-a-grid-layout/
您可以将 Flexbox 与
flex
结合使用> 简写属性:尝试一下: