# Animate text on hover and stay when cursor moves

**URL:** <https://forum.readymag.com/t/animate-text-on-hover-and-stay-when-cursor-moves/3161>\
**Category:** Animations\
**Created:** [June 27, 2024, 1:56pm UTC](https://forum.readymag.com/t/animate-text-on-hover-and-stay-when-cursor-moves/3161 "2024-06-27T13:56:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joana\_Cabete](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/joana_cabete/32/2176_2.png) [@Joana\_Cabete](https://forum.readymag.com/u/Joana_Cabete)\
**Post date:** [June 27, 2024, 1:56pm UTC](https://forum.readymag.com/t/animate-text-on-hover-and-stay-when-cursor-moves/3161/1 "2024-06-27T13:56:24Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Samus](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/samus/32/1146_2.png) [@Samus](https://forum.readymag.com/u/Samus)\
**Post date:** [June 27, 2024, 5:38pm UTC](https://forum.readymag.com/t/animate-text-on-hover-and-stay-when-cursor-moves/3161/2 "2024-06-27T17:38:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [June 28, 2024, 8:53am UTC](https://forum.readymag.com/t/animate-text-on-hover-and-stay-when-cursor-moves/3161/3 "2024-06-28T08:53:45Z")

</div>

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.