How to fix the bug when hovering over child elements?

Question

JavaScript

Good afternoon, please tell me how to solve the problem?

When hovering over a green block, the yellow block increases.
When you move the cursor away, the yellow block gets smaller.

The green block is the parent block, it has 2 children, a yellow block and a blue block.
The problem is that the animation starts to work even when hovering over child elements.

Those. you hover over the blue block and the yellow block starts to decrease (but somehow buggy) anime.js
is used for animation

How to make the animation not work when hovering over the child elements of the green block?

https://codepen.io/Zhelezniy/pen/KKmaRba

p / s: The point is exactly how the task was described .. in practice, the animation is more complicated and works differently, you can’t do it through only css .. the problem is in restarting animations when hovering over child elements

Answer 1

onmouseover-> onmouseenter
onmouseout-> onmouseleave
https://learn.javascript.ru/mousemove-mouseover-mo...