对伪元素的悬停效果不起作用

Question

我想在我的 flex 元素上提供悬停效果，它会滑下黑色 "curtain" 但由于某种原因，未创建 ::after 元素，因此悬停不起作用。我在创建 ::after 元素时做错了什么？

.flex-element {
  flex: 1 0 20%;
  margin-right: 10rem;
  z-index: 1;
  width: 20rem;
  position: relative;
  &:last-child {
    margin-right: 0;
  }
  &:hover {
    cursor: pointer;
  }
  &::after {
    content: "";
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    height: 0%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.712);
    z-index: 2;
  }
  &:hover:after {
    animation: .5s rollDown ease-in-out forwards;
  }
}

@keyframes rollDown {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}

<div id="categories" class="container">
  <div class="headline">
    <h1>Categories</h1>
  </div>
  <div class="flex">
    <img class="flex-element" src="images/img1.png ">
    <img class="flex-element" src="images/img2.png">
    <img class="flex-element" src="images/img3.png">
  </div>
</div>

Answer 1

据我了解你的需求，你可以按照下面的方式实现。

.flex{
 display: flex;
 align-items: center;
 justify-content: flex-start;
}
.flex-element {
 margin-right: 30px;
 z-index: 1;
 position: relative;
}
.flex-element:hover {
 cursor: pointer;
}
.flex-element:before {
 position: absolute;
 content: "";
 top: 0;
 left: 0;
 height: 0;
 width: 100%;
 background-color: #000;
 z-index: 0;
 opacity: 0.5;
 transition: 0.3s ease-in-out all;
 -webkit-transition: 0.3s ease-in-out all;
 -moz-transition: 0.3s ease-in-out all;
 -ms-transition: 0.3s ease-in-out all;
}
.flex-element:hover:before{
 height: 100%;
}

<div id="categories" class="container">
 <div class="headline">
  <h1>Categories</h1>
 </div>
 <div class="flex">
  <div class="flex-element"><img src="https://dummyimage.com/300"></div>
  <div class="flex-element"><img src="https://dummyimage.com/300"></div>
  <div class="flex-element"><img src="https://dummyimage.com/300"></div>
 </div>
</div>

对伪元素的悬停效果不起作用

Hover effect on pseudo element doesn't work

html

css

pseudo-class