Hover state behavior when applying other state

I’m trying to apply different states to a custom component (acting as a button).

I have the hover state set up and it’s working fine.
I’m trying to create an ‘active’ and ‘inactive’ state that will change color properties and such.

My problem being : The moment I enable another state to the button, the hover state stop being triggered by ‘on over’ events. It’s like my custom state (when ‘on’) overwrites the hover state.

Any insights ?
Thanks :slight_smile:

There seem to be a previous post about this, with no replies or comments from the Weweb team : https://community.weweb.io/t/hover-isnt-active-from-another-state

Hey, I think the issue is with how CSS works. A.k.a the last state is the one that overwrites all the ones before. You might want to place your hover last I think, this will make it “overwrite” all the other ones. The states are draggable :slight_smile:

1 Like

Thanks ! That is good to know. Seems to be working.

1 Like

This helped me too! Thanks

Just to add to anyone that finds this and has some issues with what’s suggested by Broberto.

Make sure when you have sorted your hover and other state hierarchy you change the relevant style elements on the hover state. If you’ve just created a hover from the default settings they essentially don’t get registered and you need to reapply those same colours. This is from something at least I just experienced trying to figure out this issue.