Add condition to state "Hover"

Ask us anything How do I?
1

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

2

Hi, if you select the state hover on your element, then every style you configure will apply for this state only :slight_smile:

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.

Capture d’écran 2023-07-28 à 15.58.51

Capture d’écran 2023-07-28 à 15.59.08
Capture d’écran 2023-07-28 à 15.59.08310×674 29.4 KB

3

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
4

@Alexis AFAIK this has never been solved, has it? I want hover state to be active only when disabled state is false.

5

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.