Question

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

只需简单地悬停网格即可产生这种效果，我尝试将高度和宽度设为 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>

Answer 1

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

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

Answer 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 属性。但是，由于 div 的变化，它会在悬停时导致 font-size 变大。您可以将 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;
  }

悬停时网格单元格缩小

2 个答案: