Что поменять что бы что бы подсветка заработала для каждого блока отдельно при наведении мыши на блок?

В коде есть див с классом - анимацией. И при наведении на блок анимация должна включаться (блик на звезде), но почемуто не зависимо от блока наведения мыши, работает анимация всегда только у первого дива, а надо что бы у каждого блока включалась своя анимация. Подскажите как это исправить?

/*---*/
.place {
	display:flex;
	align-items: center;
	margin-top: 15px;
}
.place_title {
	margin-left: 15px;
}
.big-place_title {
	margin-left: 10px;
}
.place_number {
	font-family:  MothFont1, serif;
      color: var(--primary-color);
  color: green;
	  font-weight: 600;
	  font-size:large;
}
.big-place_number {
	font-size:larger;
}

.star {
  display: block;
  vertical-align: top;
  width: 40px;
  height: 40px;
  background: var(--primary-color);
  background: green;
  position: relative;
  -webkit-clip-path: polygon(50% 0%, 66% 27%, 98% 35%, 76% 57%, 79% 91%, 50% 78%, 21% 91%, 24% 57%, 2% 35%, 32% 27%);
  clip-path: polygon(50% 0%, 66% 27%, 98% 35%, 76% 57%, 79% 91%, 50% 78%, 21% 91%, 24% 57%, 2% 35%, 32% 27%);
  overflow: hidden;
  margin-left:10px;
}

.big-star {
  width: 60px;
  height: 60px;
  margin-left:0px;
  }
.place:hover,
.place:focus{
	cursor: pointer;
	outline: none;
}
.light-star {
	position: absolute;
    top: 50px;
	left: -67px;
	width: 40px;
	height: 40px;
	background-color: rgb(253, 253, 253);
	filter: blur(19px);
	transform:skewX(244deg);
	animation: move 2s ease-in-out infinite both;
	display: none;
}

@keyframes move {
	0% {
	  left:0;
	}
	100% {
		left:100px;
	}
  }

.plp>.place:hover .light-star{
	display: block;
  }

<div class="tabflex">
			   <div class="plp" id="p1">
					<div class="place"  id="sub1">
						<div class="place_star">
							<div class="star big-star"></div>
							<div class="light-star" id="light"></div>
							<div class="place_number big-place_number">1 место</div>
						</div>
						<div class="place_title big-place_title">Некий текст для первого места.</div>
					</div>
					<div class="place" >
						<div class="place_star" >
							<div class="star"></div>
							<div class="light-star"></div>
							<div class="place_number">2 место</div>
						</div>
						<div class="place_title">Некий текст для вотого места </div>
					</div>
					<div class="place">
						<div class="place_star">
							<div class="star"></div>
							<div class="light-star"></div>
							<div class="place_number"></div>
						</div>
						<div class="place_title"></div>
					</div>

				</div>
			</div>
  • Вопрос задан
  • 66 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы