css - 是否可以在悬停时转换 CSS 网格内单个项目的伪元素？

Question

当我将鼠标悬停在单个网格项目上时，我正在尝试转换它们的伪元素

每当我将鼠标悬停在网格项上时，我都尝试将与单个网格项关联的伪元素的高度从 0 转换为 100%。想要的效果是伪元素从顶部下降并完全覆盖悬停时的单个网格项目，但我无法让它工作。这就是我尝试这样做的方式：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 180px));
  grid-auto-rows: minmax(100px, 180px);
  gap: 1rem;
  justify-content: center;
  margin: 200px 0 100px 0;
}

.grid-item {
  background-color: white;
  border: white 10px solid;
  transition: transform 0.2s;
  position: relative;
  background-color: brown;
}

.grid-item::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  background-color: black;
  left: 0;
  top: 0;
}

.grid-item:hover .grid-item::before {
  height: 100%;
}

<div class="grid-container">

  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>

</div>

标签： csscss-grid

Answer 1

你有.grid-item:hover .grid-item::before

它需要悬停项目内的网格项目，例如：

<div class="grid-item"> <!-- If this is hovered -->
  <div class="grid-item"></div> <!-- Pseudo element styles will affect this element -->
</div>

如果要在悬停的项目上选择伪元素：

.grid-item:hover::before

工作示例：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 180px));
  grid-auto-rows: minmax(100px, 180px);
  gap: 1rem;
  justify-content: center;
  margin: 200px 0 100px 0;
}

.grid-item {
  background-color: white;
  border: white 10px solid;
  transition: transform 0.2s;
  position: relative;
  background-color: brown;
}

.grid-item::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  background-color: black;
  left: 0;
  top: 0;
}

.grid-item:hover::before {
  height: 100%;
}

<div class="grid-container">

  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>

</div>