Hey! I’m building simple nav-bar with a few buttons. Every button has its hover-triggered animation set up. Every single button works exactly as I intended when “isolated”. But when I place the buttons next to each other with 6px distance, and try to slide cursor over from one to the other side of the screen hovering buttons one by one they all get their hover-on animation right, but the hover-out animation gets “paused” at the moment when my cursor reaches the next button in the row. In effect it looks like some the buttons are hovered in the same time. What am I doing wrong?
*It affects only “pink” buttons in the example.
*In the version under the link it gets triggered when moving cursor from left to right only, but in other page i got this effect only when moving cursor from right to left side 
.
- When I set significantly bigger distance between the buttons everything works all right, because the animation end before cursor reaches next button.
- When all the buttons are instances of the same component everything works all right .