悬停对伪元素的影响不起作用

Question

我想给我的柔性元素一个悬停效果，这将滑下一个黑色的“窗帘”，但由于某种原因：：后元素没有创建，因此悬停不工作。我在创建：：后元素方面做错了什么？

​

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

​