- 15, May 2024
- #1
Привет, у меня проблема с простым фрагментом кода, который я написал.
У меня есть наложенный div, который содержит еще один div (кнопку) в центре.
С помощью jQuery я добавил несколько классов для запуска анимации, но проблема в том, что когда я вхожу/выхожу из дочернего div, моя анимация наведения курсора мыши на основной div снова срабатывает. Вот код
У меня есть наложенный div, который содержит еще один div (кнопку) в центре.
С помощью jQuery я добавил несколько классов для запуска анимации, но проблема в том, что когда я вхожу/выхожу из дочернего div, моя анимация наведения курсора мыши на основной div снова срабатывает. Вот код
<script>
$(function(){
$(".card").mouseenter(function(){
$(this).find(".overlay").addClass('anim');
$(this).find(".plus").addClass('animScale');
});
$(".card").mouseleave(function(){
$(this).find(".overlay").removeClass('anim');
$(this).find(".plus").removeClass('animScale');
});
})
</script>
<div class="overlay">
<div class="plus">+</div>
</div>
.anim{
animation: appear 0.6s linear;
animation-fill-mode: forwards;
}
.animScale{
animation: grow 0.6s linear;
animation-fill-mode: forwards;
}
@keyframes appear{
from{opatcity: 0;}
to{opacity: 0.75;}
}
@keyframes grow{
from{transform: scale(0.5);}
to{transform: scale(1)}
}
Код (разметка):