Quick summary
Changing the hover color in Webflow requires switching the Style panel to the Hover state before applying any color changes. Once set, the element displays its default color normally and switches to the new hover color when a user mouses over it.
Steps
- Select the element you wish to change color on hover.
- Go to the Style tab on the right sidebar menu.
- Click on the dropdown menu for the Style selector.
- Under States, select Hover.
- Verify you are editing the Hover state.
- Scroll down to the Color settings under Typography for text elements.
- Pick a color for the hover state.
- Test your changes using the Preview option at the top.
- Confirm the element displays its regular color by default.
- Confirm the element changes color upon hover.
