Hover Out - deactivate after click?

Design help Animations & Interactions
1

Hi,

I have a button that calls an interaction (the animation of the vertical line at the bottom) on HOVER.
On HOVER OUT, the line moves back to its original state: https://preview.webflow.com/preview/the-brutal-portfolio?preview=841bfe299326c1effe84f4ab8712712e

Here’s my problem:

Once clicked, that line must remain on top of the next section and become a kind of step/progress bar like in this mockup:

Get%20down%201
Get%20down%2011440×900 230 KB

But since the aforementioned button disappears onClick, the HOVER OUT action is automatically launched and the line goes back to its original state.

Maybe it’s the wrong logic, but is it possible to deactivate that HOVER OUT animation once the button is clicked?

Thanks,

pEp.

2

I’m having the same issue. Anyone here to help out?