Hover Effect Shows by Default on Page Load

I made a hover effect on the second section, but when I click on preview, it automatically shows the hover state instead of the normal static state. However, after hovering once, it works as expected. The issue is that the hover state is already visible when someone visits the website. How can I fix this?

Hi there,

Hover states in Webflow should only activate when a mouse pointer hovers over an element. If you’re experiencing unexpected hover state behavior, here are some common solutions:

First, check your interaction settings in the Elements panel to ensure no automatic triggers are set. Then, review your element’s class settings and remove any permanent hover states that might be applied. You can also try creating a new class for the hover state to ensure there are no style conflicts.

For touch devices, hover states typically don’t apply since there’s no mouse pointer. Consider using alternative interactions like tap states for mobile devices if you need similar functionality.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

Hey @Tycho,

Try deleting the initial state items on your portfolio-animation-out animation. So that it is just what starts at 0s. (see image)

Most of the time I found that it’s best not to have an initial state on the ending animations.