Эффект наведения на псевдоэлемент не работает - PullRequest
Новая
       51

Эффект наведения на псевдоэлемент не работает

1 голос
/ 23 апреля 2020

Я хочу дать эффект наведения на мои flex-элементы, который бы скользил по черной "шторке", но по какой-то причине элемент :: 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>

1 Ответ

2 голосов
/ 23 апреля 2020

Насколько я понимаю ваше требование, вы можете выполнить его следующим образом. 

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