Проблема с наведением мыши

Привет, у меня проблема с простым фрагментом кода, который я написал.

У меня есть наложенный 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)}


}

Код (разметка):

Что делает работу JavaScript, не говоря уже о крушении умственно ослабленного поезда того, как НЕ использовать JavaScript, который является jQuery. У вас есть CSS, используйте его.

Это называется :hover, используй. Точно так же я бы не стал тратить на это анимацию, простой переход должен справиться с этим.

хотя вы УВЕРЕНЫ, что вам не нужна НИКАКАЯ анимация при наведении мыши?!? Я бы, наверное, просто побежал назад. Предполагая, что .card является родительским элементом этих элементов и не требует ЛЮБОЙ анимации:

 
.overlay {
opacity:0;
transition:opacity 0.6s;
}

.card:hover .overlay {
opacity:1;
}

.plus {
transform:scale(0.5);
transition:transform 0.6s;
}

.card:hover .plus {
transform:scale(1);
}

Код (разметка): Если вы хотите, чтобы анимация запускалась назад при наведении курсора мыши, удалите строки с нулями и переместите другие переходы в основные элементы следующим образом:

  .overlay { opacity:0; transition:opacity 0s; /* no transition on mouse-out */ } .card:hover .overlay { opacity:1; transition:opacity 0.6s; } .plus { transform:scale(0.5); transition:transform 0s; /* no transition mouse-out */ } .card:hover .plus { transform:scale(1); transition:transform 0.6s; }

Код (разметка): Если они не являются дочерними элементами .card, попробуйте добраться до них, используя соседние одноуровневые селекторы.

Чтобы сказать наверняка, нам нужно увидеть полную разметку. Это просто не работа JS. Также в зависимости от того, что такое .card (скажите мне, что это не столь же умственно ослабленный список того, как НЕ использовать HTML и CSS, который является чушью!) вы также можете добавить :focus для навигации с помощью клавиатуры. Вы пишете код для альтернативной навигации, верно?