Hello,
I have a text_1 appearing on hover, with a text_2 as trigger. How can I have the opacity of text_1 stay at 100 even when my cursor goes away from text_2?
With hover, the animation will work as long as the condition ‘hover’ is true; as soon as you stop hovering it—it will revert the animation.
Maybe you can try a different approach with Lottie? These are more flexible. You can set the lottie sequence to be triggered with hover and keep looping off. This way, if you hover it, it will start and will retain the last frame of the sequence. Downside: you will have to build your own “text_1” with a lottie builder, though.
I would do it with a small bit of custom js code.
The logic would be:
on mouseenter text-1 → add a class to your text-2 element which has the css value of “opacity:1!important;”
You have to figure out the data-id of your elements via the dev-tools. And how to set up the “mouseenter-addclass” thing. Have a look at stackoverflow to find the answer on how to do this.
Its mainly only one line of code.