这里有一个简单的网格：
<html>
<head>
<style>
.grid {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(13, 3fr);
}
.box {
position: relative;
padding-bottom: 100%;
color: #fff;
transition: 1000ms;
}
.box .square {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 2px solid;
box-sizing: border-box;
background: #101318;
display: flex;
text-align: center;
flex-direction: column;
justify-content: center;
}
.box:hover {
transform: scale(2);
z-index: 2;
}
.r1 { grid-row: 20; }
.r2 { grid-row: 21; }
.c1 { grid-column: 2; }
.c2 { grid-column: 3; }
</style>
</head>
<body>
<div class="grid">
<div class="box r1 c1">
<div class="square">A</div>
</div>
<div class="box r2 c1">
<div class="square">B</div>
</div>
<div class="box r1 c2">
<div class="square">C</div>
</div>
<div class="box r2 c2">
<div class="square">D</div>
</div>
</div>
</body>
</html当我悬停在一个框上时，它会变大并进入前景，但一旦我离开，它就会变小，这是应该的，但它也会回到后面，但我希望它保持在前景中，直到它再次变小，并且只与当前悬停的框重叠。感谢
在.box类上使用z-index: 1;以避免它跳到后面。
<html>
<head>
<style>
.grid {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(13, 3fr);
}
.box {
position: relative;
padding-bottom: 100%;
color: #fff;
transition: 1000ms;
z-index: 1;
}
.box .square {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 2px solid;
box-sizing: border-box;
background: #101318;
display: flex;
text-align: center;
flex-direction: column;
justify-content: center;
}
.box:hover {
transform: scale(2);
z-index: 2;
}
.r1 { grid-row: 20; }
.r2 { grid-row: 21; }
.c1 { grid-column: 2; }
.c2 { grid-column: 3; }
</style>
</head>
<body>
<div class="grid">
<div class="box r1 c1">
<div class="square">A</div>
</div>
<div class="box r2 c1">
<div class="square">B</div>
</div>
<div class="box r1 c2">
<div class="square">C</div>
</div>
<div class="box r2 c2">
<div class="square">D</div>
</div>
</div>
</body>
</html