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