Interaction overrides hover state

Hey everyone

I have a problem with an interaction overrideing the hover state that I cant seem to figure out on myself.

The idea is that when you hover over one of these titles, it gets the purple textcolor. I did this by setting a hover state and that works fine.

Then when you click a title, the element that triggers it becomes ‘active’ (change illustration, close other text, open his text, make other titles dark again and changes his text color to purple).

Once Ive pressed one of the titles, and the interaction happens, the normal hover state of the titles (becoming purple when hover) doesn’t work anymore.

Is there a way for the hover state and interaction to work together?

*I tried it with a hover interaction too, but then the hover out interaction (change the text color back to dark) overrides the purple textcolor of the ‘active’ title so that didn’t really work eather

Thanks in advance!

Here is my public share link: LINK
(how to access public share link)

1 Like

Hi! I’m having the same issue where interactions that change the BG color override CSS hover states. I found a similar thread on the forum from 2016, however, it seems like the issue still exists.

My read-only link (go to the Product page): https://preview.webflow.com/preview/jobpal

(also pinging @Waldo here since you were included in the other, now closed, thread)

Any update on this would be really great :blush:

Thanks!

1 Like

Exact same issue here. I’ve figured out the problem and it’s rather messy. Unfortunately, if you ever use Interactions on any element, Webflow overwrites its related CSS completely.

In other words, Webflow’s Interactions inline any CSS changes into HTML. The Designer’s CSS changes cannot touch the HTML…

Once a user touches a Webflow interaction, no Designer-based CSS changes will do anything.

Sigh, what a silly and ridiculous quirk. It looks “good” until users do anything and then it craps itself.

The only reasonable workaround seems to be never touch CSS:hover states if you’re using Interactions, but this is documented exactly where?

Poor form, Webflow.

States | Webflow University
Triggers and animations | Webflow University

I found this note, tucked away in a forum post two years ago:

Why isn’t this problem noted in the Designer? How are we supposed to know Interactions’ JavaScript will overwrite the Designer’s own CSS?

Webflow, you wrote the Interactions codebase. You wrote the Designer codebase. Make them play well, or if you can’t, tell users in your software and not hidden away in forum posts…

1 Like

I have zero idea why my post was deleted (by me apparently) 20 seconds after I posted it… first I knew was you calling it out on the other thread. :man_shrugging: Thanks for pointing it out.

Here it is again :point_up:

2 Likes

Thanks for re-sharing it, @magicmark. I hope it’s made clear to Webflow (or whichever committees / approvals / workshops) that “Warning: we run two overlapping, inconsistent, and sometimes conflicting animation systems at once. Here are the limitations:” should be made clear on Webflow’s Documentation.

A list of what Interactions Webflow has and a list of what CSS animations Webflow has would go a long way into users not getting comfortable, “Ah, yup, don’t touch this.”

Example from that very thread: interactions cannot affect text-decoration, but they can affect text color. Huh? This is just one example inconsistency: countless others throughout Webflow. So to have a Normal Day of Developing, you need key information to trust Webflow:

  1. Webflow’s two interaction systems do not play well together at all. They’re mutually destructive, i.e., a very buggy website with broken elements, broken animations.
  2. Webflow has only added some CSS animations and Webflow’s Interactions are missing most of the CSS animations. Who has a list? Webflow internally, obviously, but not us. You need to get knee-deep into a project to really understand what’s MIA.

We don’t have that information; Webflow does.

If we want to use a hover animation to 1) add an underline and 2) change the parent div’s background color, you’re forced to combine CSS Hover and Webflow Interactions. But Webflow says you shouldn’t do that.

These “huh, why?” limitations are not detailed anywhere nor given much serious thought (some six years after Interactions launched), and you only realize them once:

  1. You try to do something using Webflow Support’s patented response “Explore the Interactions panel, play around with it, see what works. This is playground, but only we have the rules. You need to rush in, see what’s broken, and then come back.”
  2. Webflow’s mish-mash of animations starts conflicting, overlapping, and creating buggy websites. Webflow University feels more marketing than documentation at this point.
  3. You trawl the forums because Support will take days to answer. You find someone replied months ago, bringing up this exact issue, and we’re all still here.

The only mention of the CSS vs JS division is on the marketing page,

Webflow’s interactions and animations tools bring all the power of CSS and JavaScript into a completely visual tool, empowering designers to build complex, rich animations without even thinking about code.

//

About to join the Webinar. How was Webflow this morning? Well, I just hit publish, waited the mandatory “20 seconds, do not click anything”, and tried to open our CMS. How did Webflow react?

Not well. I will say, this is the first time I’ve had this error:

RESULT_CODE_HANG

Moving here, as it’s more relevant to this thread.