悬停时是否可以在 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>

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>

如果你想select你悬停的项目上的伪元素：

.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>

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

Is it possible to transform the pseudo-elements of individual items inside a CSS grid on hover?

css

css-grid

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