MouseOver issue

Hi, I have a problem with a simple piece of code I wrote. I have a an overlay div that container another div (button) in the center. With jQuery I added some classes to trigger an animation but the problem is when I enter / exit the child div my main div mouseover animation triggers again.

Here is the code

<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)}
}

Code (markup):

 

What the blazes makes any of this JavaScript's job, much less the mentally enfeebled train wreck of how NOT to use JavaScript that is jQuery.

You've got CSS, use it. It's called :hover, use it.

Likewise this isn't something I'd waste animations on, a simple transition should handle it.... though are you SURE you don't want ANY animation on the mouse-out?!? I'd probably have it just run backwards.

Assuming the .card is a parent of these elements and don't want ANY out animation:

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

Code (markup):

If you want the animations to run backwards on mouse-out, remove the 0s lines and move the other transitions into the main elements thusly:

.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);
}

Code (markup):

If they're not children of .card try to get at them using adjacent sibling selectors. We'd have to see the full markup to say for sure.

This just isn't JS' job. Also depending on what .card is (tell me that's not the equally mentally enfeebled train wreck laundry list of how NOT to use HTML and CSS that is bootcrap!) you might also want to add :focus for keyboard navigation.

You are coding for alternative navigation, right?