Cancel mouseout animation for a click animation

[GcodeG01]

Hi,

 

Sorry, I'm new to coding, but I kept searching and can't find the answer online. I linked in my codepen a more simplified version of what I want to code.

What I have is a card with 3 sections. Mouseover one of them will turn the text opacity to 0 and mouseout will bring them back to 1. What I want to be able to do is to click on either section and have an animation that has the selected section to take over the whole box (selected section height 100% and the other 2 0%), while having the text opacity to be 0. I'm having trouble with keeping the opacity to 0, as the mouseout is overwriting my click animation.

 

Thank you!

See the Pen dBRmKE by GcodeG01 (@GcodeG01) on CodePen

[PointC]

It sounds like you're looking for removeEventListener()

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

 

Animating flex values can be problematic. You may want to take a look at this thread:

Happy tweening.

[GcodeG01]

Thank you so much!