html - CSS 网格和悬停文本

Question

我正在尝试弄清楚如何在 CSS Grid 中使用文本制作悬停效果。我希望文本出现在每个网格的中间，但我似乎还做不到。

到目前为止，我已经通过这样做获得了悬停效果:

.productName {
  opacity: 0;
}

.firstArea > .product:hover {
  opacity: .3;
  transition: opacity 0.5s;
}

但后来我将该代码更改为下面的内容，这样我就可以在每个单独的网格中间显示文本，但无济于事。

.product .productName {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.6);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
  transition: .5s;
}

.product:hover .productName {
  visibility: visible;
  opacity: 1;
}

我认为这是因为我将 .product .productName 设置为 flex 元素加上我给元素的位置，但现在我有点筋疲力尽，无法思考另一种解决方案......

因此，如果有人可以帮助我解决这个问题，那将是一个很大的帮助!这是 codepen.io 的链接，所以你们可以看到整个事情。

https://codepen.io/cfervir/full/JLwgVb

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

a {
  text-decoration: none;
}

.firstArea {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: minmax(180px, 1fr);
  grid-gap: 1px;
  padding-bottom: 1px;
  position: relative;
}

.firstOne,
.product {
  background-color: #00b9e2;
}

.product {
  display: flex;
  justify-content: center;
  align-items: center;
}

.productName {
  color: white;
  visibility: hidden;
  opacity: 0;
}

.product:hover .productName {
  visibility: visible;
  opacity: 1;
}

<div class="wrapper">
  <section class="firstArea">
    <div class="firstOne">
      <div>Hi there!</div>
    </div>
    <div class="product">
      <a href="#" target="_blank">
        <div class="productName">Test A</div>
      </a>
    </div>
    <div class="product">
      <a href="#" target="_blank">
        <div class="productName">Test B</div>
      </a>
    </div>
    <div class="product">
      <a href="#" target="_blank">
        <div class="productName">Test C</div>
      </a>
    </div>
    <div class="product">
      <a href="#" target="_blank">
        <div class="productName">Test D</div>
      </a>
    </div>
  </section>
</div>

额外:是否可以在较小的屏幕宽度下使空表出现在 CSS Grid 中？例如，当我缩小窗口时，会出现“空白区域”，并且我希望其中可以有空网格(具有相同的颜色、边框等……但如果我将鼠标悬停在它们上面，则不会发生任何事情)。

Answer 1

看起来您需要“调整”.product 并摆脱 .productName 上的绝对定位。我已经摆脱了一些无关的 CSS 规则以简化事情:

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

a {
  text-decoration: none;
}

.firstArea {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: minmax(180px, 1fr);
  grid-gap: 1px;
  padding-bottom: 1px;
  position: relative;
}

.firstOne,
.product {
  background-color: #00b9e2;
}

.product {
  display: flex;
  justify-content: center;
  align-items: center;
}

.productName {
  color: white;
  visibility: hidden;
  opacity: 0;
}

.product:hover .productName {
  visibility: visible;
  opacity: 1;
}

<div class="wrapper">
  <section class="firstArea">
    <div class="firstOne">
      <div>Hi there!</div>
    </div>
    <div class="product">
      <a href="#" target="_blank">
        <div class="productName">Test A</div>
      </a>
    </div>
    <div class="product">
      <a href="#" target="_blank">
        <div class="productName">Test B</div>
      </a>
    </div>
    <div class="product">
      <a href="#" target="_blank">
        <div class="productName">Test C</div>
      </a>
    </div>
    <div class="product">
      <a href="#" target="_blank">
        <div class="productName">Test D</div>
      </a>
    </div>
  </section>
</div>