我制作了一个 JSFiddle 来重现这个问题。
我试图让一个网格元素在悬停时增长，但它会导致这个奇怪的问题，它会进入另一个网格元素下方，然后跳转到我期望的方式。
为什么会发生这种情况？有办法解决吗？
.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;
}
<div class="container"> <div class="box one"></div> <div class="box two"></div> </div>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我写了一篇关于这种效果的详细文章，我邀请您阅读以了解如何使用 CSS 网格实现这种效果：https://css-tricks.com/zooming-images-in-a-grid-layout/
.container { height: calc(100vh - 2em); display: grid; grid-template-columns: auto auto; margin: 1em; gap: 1em; } .box { width: 0; min-width: 100%; transition: width 0.5s; } .box:hover { width: 40vw; /* read the article to understand the math behind setting this value */ } .one {background: pink;} .two {background: red;} body { margin: 0; }您可以将 Flexbox 与
flex结合使用> 简写属性：.container { display: flex; gap: 1em; margin: 1em; } .box { flex: 1; /* This makes boxes take equal space by default */ transition: 0.5s; } .box:hover { flex: 2; /* A hovered box expands twice as fast as a non-hovered */ }尝试一下：
.container { display: flex; gap: 1em; margin: 1em; } .box { flex: 1; transition: 0.5s; } .box:hover { flex: 2; } /* Demo only */ body { margin: 0; } .container { height: 100vh; } .box { height: 100%; } .one { background: pink; } .two { background: red; }