Hover animation is triggered when the pointer goes over an element with hover effects. They add visibility to attract engagement for site elements like call-to-action (CTA) buttons, navigation menu items, hyperlinks, or headers. These effects or animations also serve as an additional channel to reinforce branding or style.


There are different ways to add animations or effects upon hover, such as changing font style, color, dimension, and background or adding decorations like underline, over-line, or strike-through if preferred.

You can modify hover font animations for theme and style preset variables like hypertexts, primary and secondary link buttons, navigation menu items, and social media icons.


To change the hover font color via theme editor:

  1. From the Site Editor, select Styling and click Edit on the target theme

  2. Once in the Theme Editor, type the keywords Hover Font Color in the variables search bar

  3. Expand any target variables from the search result such as link button, link interaction, main and submenu navigation items, etc.

  4. In the Hover Font Color field, enter the hexadecimal value for your target hover color or click the color previewer next to choose your preferred color

  5. Click Publish.

Did this answer your question?