悬停时网格单元格缩小答案

【问题标题】：Grid cell shrinking when hovered over悬停时网格单元格缩小
【发布时间】：2021-05-17 13:46:32
【问题描述】：

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

只需简单地悬停网格即可产生这种效果，我尝试将高度和宽度设为 100%。

我无法弄清楚发生了什么以及问题出在哪里，悬停在 div 上而不是图像上。我可以理解，如果图像被拉伸以适应 div，悬停在图像上是否不起作用。

代码笔：https://codepen.io/Centaur26/pen/BaWKeEm

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
html {
  height: 100%;
  width: 100%;
}

.block {
  height: 100%;
}
.block h1 {
  display: flex;
  height: 10%;
  text-align: center;
  /* border:1px solid red; */
  flex-direction: column;
  align-content: center;
  padding-top: 10px;
  background: grey;
}

.container {
  display: grid;
  height: 90%;
  width: 100%;
  /* background:  black; */

  grid-template-areas:
    "pic1 pic2 pic2 pic3 pic3"
    "pic1 pic4 pic5 pic3 pic3"
    "pic6 pic4 pic5 pic7 pic8"
    "pic6 pic9 pic10 pic7 pic8";
  gap: 2px;
}

.container > div {
  border: 1px solid black;
}

.pic1 {
  grid-area: pic1;

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

.pic2 {
  grid-area: pic2;
  background-image: url(chess/chess2.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.pic3 {
  grid-area: pic3;
  background-image: url(chess/tal1.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.pic4 {
  grid-area: pic4;
  background-image: url(chess/kasparov.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.pic5 {
  grid-area: pic5;
  background-image: url(chess/gary.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.pic6 {
  grid-area: pic6;
  background-image: url(chess/carlson.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.pic7 {
  grid-area: pic7;
  background-image: url(chess/ding.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.pic8 {
  grid-area: pic8;
  background-image: url(chess/girl.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.pic9 {
  grid-area: pic9;
  background-image: url(chess/hand.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.pic10 {
  grid-area: pic10;
  background-image: url(chess/chess123.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* .pic1:hover{
        padding: 10px;
        position: absolute;
        left:0;
        bottom:0;
        color:white;
        width:100%;
        opacity: .1;
      
        border: 1px solid red;
} */

.pic2:hover p {
  font-size: 17px;
  opacity: 0.7;
  color: white;
  font-weight: bolder;
  position: absolute;
  bottom: 0;
  left: 0;
  border: 1px solid red;
  width: 100%;
  height: 100%;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
}

.pic1:hover p {
  font-size: 17px;
  opacity: 0.7;
  color: white;
  font-weight: bolder;
  position: absolute;
  bottom: 0;
  left: 0;
  border: 1px solid red;
  width: 100%;
  height: 100%;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Chess</title>
      <link rel="stylesheet" href="chess.css">
   </head>
   <body>
      <div class="block">
         <h1>Chess Images</h1>
         <div class="container">
            <div class="pic1">
               <p>Judith Polgar</p>
            </div>
            <div class="pic2">
               <p>Chess Board</p>
            </div>
            <div class="pic3"></div>
            <div class="pic4"></div>
            <div class="pic5"></div>
            <div class="pic6"></div>
            <div class="pic7"></div>
            <div class="pic8"></div>
            <div class="pic9"></div>
            <div class="pic10"></div>
         </div>
      </div>
   </body>
</html>

【问题讨论】：

标签： html css hover css-grid

【解决方案1】：

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

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

【讨论】：

，没有固定尺寸可能是它的问题是它的不规则网格具有给定的网格模板区域，我不知道如何为此设置固定尺寸..
好吧，如果你只是想让它修复并正常工作，那么将上面的代码添加到你分配网格区域的容器中。
@Justin 是否存在相对尺寸长度（例如百分比）的网格不适用于网格悬停效果？
它实际上运作良好：它使单元格适合其内容的维度。当您悬停时，您会更改内容（字体大小、边框、宽度、高度等），因此网格单元格适合新内容的大小。如果您固定网格单元格的大小而不是要求它们适应单元格的内容，那么当内容更改时它们将不再调整大小。
网格运行良好。悬停时它缩小的原因是因为您将  的位置更改为绝对位置，从而将其从 html 流中删除。现在网格重新调整自身以再次均匀分布网格。从上面给出的示例中删除两个 标签，看看单元格是如何对齐的。然后将它们添加回来并悬停，您会看到它们恢复到没有 标签的状态。那是因为您只是通过将  绝对定位在 :hover 中来将  从 html 流中取出。

【解决方案2】：

我可以看到您在悬停时正在更改 p 标签的样式，而不是 div 标签。我认为收缩是由position 引起的。你可以试试这个解决方案

    .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 属性。但是，由于font-size 的更改，它可能会导致div 在悬停时变大。例如，您可以将min-width 设置为尽可能大的div

.pic1 {
     grid-area: pic1;

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

【讨论】：

您好 Linh，我为网格中的每个单元格分配了固定宽度，并为特定结果分配了网格项，感谢您的反馈。