是否有可能在悬停时转换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>

如果你想在悬停的项目上选择伪元素:

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