Hi,
Is there a way to add a condition to the css state “Hover” ? I mean, I want to have a special css style when the field is (Hover AND bla bla bla …).
Thanks for your help,
Baptiste
Hi, if you select the state hover on your element, then every style you configure will apply for this state only 
When you go back to normal state you will see a little bubble aside of the property you configured previously, and when you click on the property you will see a tooltip telling you the property has a different value for another state.
Hi Alexis,
Not sure to understand you reply. What I meant is that I have a input field, and I want a special css when the field is hovered, but only when the field is on “read only”. So I want to add the condition “hover and in read only”.
Do you know what I mean ?
Thanks,
Baptiste
2 Likes
@Alexis AFAIK this has never been solved, has it? I want hover state to be active only when disabled state is false.
Unfortunately there’s no straight forward solution I’m aware of at the moment for this. What you have to do is set the values on the hover object to change when read only would be true.
Edit:
Just figured out what the issue here was, first the state you want to override all states should be last the heirachy is bottom to top, bottom overriding everything above it.
Once you have sorted your state hierarchy you change the relevant style elements on the overrider state. If you’ve just created a Top state 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.
1 Like
Hey @Dorian , I am actually trying to do the same thing.
Did you manage to have any luck with this ?
No sorry I never did. But did you try @Yaj’s idea above?
Here’s what worked for me, in case it helps someone. I had the same issue.
I have a hover state that has a green background, while my default state is transparent. Added a disabled state and while the button was disabled my hover colors were showing instead of the my disable state colors that were equal to the default.
I noticed that when I switched the pointer in the disabled state it took effect, but the rest of the colors were still taking the effect of hover. So I changed the colors of my text and background to something else and it worked. Changed them back to the original colors and still worked. Looks like a bug in how styles are taken up in multiple states. Simply modifying the colors back and forth did the trick for me. Hope that helps.