How can I delete a hover state's styles in Webflow that I added by mistake?
TL;DR
- Select the element, switch to the "Hover" state in the Style panel.
- Click the blue labels next to each styled property and hit the Reset icon to remove hover-specific styles.
- Return to the "None" state when finished to confirm the resets.
If you've accidentally added styles to a hover state in Webflow and want to remove them, you can reset or delete those specific styles easily.
1. Navigate to the Element's Hover State
- Select the element with the hover styles.
- In the Selector panel (top of the Style panel), click the dropdown next to the class name.
- Choose “Hover” from the state menu to switch into the hover state view.
2. Reset or Delete the Hover Styles
- For each style you want to remove (like color, size, padding, etc.), click the blue style label (indicating it’s different from the default) next to the property name.
- Click the “Reset” icon (circular arrow) to the right of the style, which removes that specific property from the hover state.
- Repeat for each property you want to reset.
3. Return to the None State
- Once done, go back to the main style state by selecting “None” from the state dropdown.
- The hover styles will now only apply if any properties remain; if none, the hover state will inherit from the default style.
Summary
To remove hover styles in Webflow, switch the selector to "Hover," then individually reset each style property using the Reset icon, which returns settings to inherit from the base (None) state.