Html 将鼠标悬停在上方时网格单元收缩

当我将鼠标悬停在网格上时，如何阻止网格收缩，并阻止整个网格发生变化

只需简单地悬停网格就可以产生这种效果，我尝试了100%的高度和宽度

我不知道发生了什么，问题来自哪里，悬停在div上，而不是图像上。我可以理解，如果悬停在图像上没有工作，因为图像被拉伸以适合div

代码笔：

*{
框大小：边框框；
保证金：0；
填充：0；
}
身体，
html{
身高：100%；
宽度：100%；
}
.街区{
身高：100%；
}
.h1区{
显示器：flex；
身高：10%；
文本对齐：居中；
/*边框：1px纯红*/
弯曲方向：立柱；
对齐内容：居中对齐；
填充顶部：10px；
背景：灰色；
}
.集装箱{
显示：网格；
身高：90%；
宽度：100%；
/*背景：黑色*/
网格模板区域：
“pic1 pic2 pic2 pic3 pic3”
“pic1 pic4 pic5 pic3 pic3”
“pic6 pic4 pic5 pic7 pic8”
“pic6 pic9 pic10 pic7 pic8”；
间隙：2px；
}
.container>div{
边框：1px纯黑；
}
.pic1{
网格面积：pic1；
背景图片：url（chess/Polgar.jpg）；
位置：相对位置；
背景尺寸：封面；
背景大小：100%100%；
}
.pic2{
网格面积：pic2；
背景图片：url（chess/chess2.jpg）；
背景尺寸：包含；
背景重复：无重复；
背景大小：100%100%；
位置：相对位置；
}
.pic3{
网格面积：pic3；
背景图片：url（chess/tal1.jpg）；
背景尺寸：包含；
背景重复：无重复；
背景大小：100%100%；
}
图4{
网格面积：pic4；
背景图片：url（chess/kasparov.jpg）；
背景尺寸：包含；
背景重复：无重复；
背景大小：100%100%；
}
图5{
网格面积：pic5；
背景图片：url（chess/gary.png）；
背景尺寸：包含；
背景重复：无重复；
背景大小：100%100%；
}
.图6{
网格面积：pic6；
背景图片：url（chess/carlson.jpg）；
背景尺寸：包含；
背景重复：无重复；
背景大小：100%100%；
}
.图7{
网格面积：pic7；
背景图片：url（chess/ding.jpg）；
背景尺寸：包含；
背景重复：无重复；
背景大小：100%100%；
}
图8{
网格面积：pic8；
背景图片：url（chess/girl.jpg）；
背景尺寸：包含；
背景重复：无重复；
背景大小：100%100%；
}
.图9{
网格面积：pic9；
背景图片：url（chess/hand.jpg）；
背景尺寸：包含；
背景重复：无重复；
背景大小：100%100%；
}
图10{
网格面积：pic10；
背景图片：url（chess/chess123.jpg）；
背景尺寸：包含；
背景重复：无重复；
背景大小：100%100%；
}
/*图1：悬停{
填充：10px；
位置：绝对位置；
左：0；
底部：0；
颜色：白色；
宽度：100%；
不透明度：.1；
边框：1px纯红；
} */
图2：悬停p{
字号：17px；
不透明度：0.7；
颜色：白色；
字体大小：粗体；
位置：绝对位置；
底部：0；
左：0；
边框：1px纯红；
宽度：100%；
身高：100%；
填充：10px；
背景：rgba（0,0,0,0.5）；
文本对齐：居中；
}
图1：悬停p{
字号：17px；
不透明度：0.7；
颜色：白色；
字体大小：粗体；
位置：绝对位置；
底部：0；
左：0；
边框：1px纯红；
宽度：100%；
身高：100%；
填充：10px；
背景：rgba（0,0,0,0.5）；
文本对齐：居中；
}

国际象棋
象棋图像
朱迪思·波尔加

棋盘

我猜它在缩小，因为它没有为每一列和每一行指定特定的宽度和高度，所以它在缩小以适应内容。不是100%确定，但将以下内容添加到

容器中

修复了它

grid-template-columns: repeat(5, 20%);
grid-template-rows: repeat(4, 25%);

---

我可以看到您在悬停时正在更改

p

标记的样式，而不是

div

标记的样式。我认为收缩是由位置引起的。 你可以试试这个解决方案

    .pic1:hover {
   font-size: 17px;
   opacity: .7;
   color: white;
   font-weight: bolder;
   border-color: red;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, .5);
   text-align: center;
}

在这里，我将

hover

应用于

div

，并删除了

position

和

border

属性。 但是，由于

字体大小

的更改，悬停时会导致

div

变大。例如，您可以将

minwidth

设置为

div

的最大尺寸

.pic1 {
     grid-area: pic1;

     background-image: url(chess/Polgar.jpg);
     position: relative;
     background-size: cover;
     background-size: 100% 100%;
     min-width: 290px;
  }

---

、没有固定尺寸可能是问题所在，因为它是具有给定网格模板区域的不规则网格，我不知道如何为此设置固定尺寸。如果您只是希望它固定并正常工作，那么请将上述代码添加到您分配网格区域的容器中。@Justin是否使用相对尺寸长度（例如百分比）网格网格悬停效果不太好吗？实际上效果很好：它使单元格符合其内容的尺寸。当您悬停时，您会更改内容（字体大小、边框、宽度、高度等），因此网格单元适合新内容的大小。如果您调整网格单元格的大小，而不是要求它们适应单元格的内容，那么当内容发生变化时，它们将不再调整大小。网格工作正常。当您悬停时，它会缩小的原因是您将

的位置更改为绝对位置，从而将其从html流中删除。现在，栅格将重新调整自身以再次均匀分布栅格。从上面提供的exmaple中删除两个标签，然后查看单元格如何对齐。然后将它们添加回并悬停，您将看到它们恢复到没有

标记的状态。这是因为您将

完全定位在

：hover

中，从而使它脱离了html流，