J'ai créé un JSFiddle pour reproduire ce problème.
J'essaie de faire grandir un élément de grille en survol, mais cela provoque ce problème étrange où il passe sous un autre élément de grille, puis saute comme je l'attends.
Pourquoi cela arrive-t-il ? Y a-t-il un moyen de résoudre ?
.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; }
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'ai écrit un article détaillé sur cet effet et je vous invite à le lire pour apprendre comment réaliser cet effet en utilisant CSS Grid :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; }Vous pouvez combiner Flexbox avec
flex结合使用> propriétés abrégées:.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 */ }Essayez-le :
.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; }