Imagine I have a button.
The button has a background in the styles panel of #381722. or whatever fixed hex value.
On hover, I change it to red.
On hover out, I want it to return to the original state in the styles.
How do I do that?
I do not want to give it a fixed color on hover out, as that is detached from the color I have in styles.
How do I revert it back to its original value without providing it manually?
Here is my public share link: LINK
(how to access public share link)
Hover is a CSS state. It only applies while hovered, and the hover styling only shows then. When you hover out, it returns to the non-hover state naturally.
If you’re not seeing that, it’s because you have something else conflicting, for example a visited state color or custom code.
By hover I actually mean the mouse hover interaction.
This can also be applied to the Moues Tap interaction.
The question is more general, and how to revert back to the original color.
Ah! Missed that note in the title.
I’m not aware of a current way to specify inherit or reset in e.g. color values. I recall that it used to be that you could enter a hyphen or type auto to cause a color to inherit, but I don’t think that works now. You might investigate “inherit color” in the forums to see if there’s still a way to do this in the designer.
Personally I’d probably split the hover color change out into the standard CSS class state mentioned above, and then do any interactions work on that same class separately.
The hover state does not allow you to modify global elements on the page. With the interactions, you can do a lot more than just change what you’re hovering over.
Interactions are limited in how they target, when you want to go beyond those capabilities most devs lean towards GSAP instead.
