How can I disable the hover effect when the state is on current in Webflow?
TL;DR
- Select the link on the current page to access its "Current" state.
- Adjust styles within the "Current" state to match or override hover styles.
- Optionally remove or modify general hover styles if needed.
- Publish and test to confirm that hover effects no longer apply to the active link.
To disable a hover effect when a link or element is in its "Current" state in Webflow, you need to style the "Current" class state separately so it overrides the hover effect.
1. Identify the Link with a Current State
- The "Current" state automatically appears in Webflow when a link block, nav link, or other link component points to the currently active page.
- Select the link element. If you're on the correct page, Webflow will add a "Current" label to the class name in the selector field.
2. Edit the Hover State
- Select the link element.
- In the States menu (top right of the Style panel), choose Hover.
- Adjust or remove any hover styles (e.g., background color, text color, underline).
- These styles apply to all links with that class when hovered.
3. Override the Hover on Current State
- With the same link selected, return to the Current state (appears automatically when you're on the linked page).
- In combination with Hover, the browser uses the more specific state. You can override this by styling the Current state directly.
- Go to Style panel, and set properties that match or negate the hover effect:
- If you changed the text color on hover, set the Current state’s text color to the normal one.
- If you added a background effect on hover, apply the original background in the Current state.
4. Use Webflow’s Specificity Rules
- Webflow automatically applies Current Hover > Current > Hover > None in terms of CSS specificity.
- If necessary, create a duplicated class specifically for links that shouldn't have hover effects.
5. Publish and Test
- Publish your site to test the live behavior.
- On the current page, hover over the navigation link. If done correctly, the hover styles will not override the current styles.
Summary
To disable a hover effect on “Current” elements in Webflow, select the element in its Current state and apply styles that override the hover properties. This ensures the link appears consistent and unaffected by hover interactions when on its active page.