Automatically modifying all token hovers

At a glance

The community member is looking for a way to automatically modify the hover states of a set of tokens without having to edit each one manually. The comments suggest that there is no built-in function or script to do this, and the best approach is to use CSS variables to manage the styles. One community member mentions that they often use the :hover and :focus pseudo-classes in CSS to apply the same styles to multiple states, but there is no explicitly marked answer for the original question.

RRiccardo Caro

Hey everyone! 👋

Is there a way to automatically modify all the hovers of a token at once? I have a set of tokens, and I’d like to change their hover states without having to edit each one manually. Is there any function, script, or method to do this quickly?

Thanks in advance for the help!

6 comments

OOleg Isonen

Unfortunately no. I think there might be a problem with how you organized the styles, e.g. if you want to update a color everywhere, should have used a variable.

JJeremy

Is there a way to apply the :hover state of a token and then apply all those into the same token for :focus or other states?

OOleg Isonen

no, I actually don't think, we know how to do this using plain CSS either, usually these things differ quite a bit, so best reuse is variables for values

JJeremy

in plain css I often do this:

.class:hover,
.class:focus {
property: value;
}

This isn't a big deal doing it manually, I just ran into wanting to do this for the first time recently.

OOleg Isonen

oh true lol

OOleg Isonen

I believe originally we wanted to add a checkbox before each state in the menu so one can select multiple once, but we never implemented this

Add a reply

Join the Webstudio community

Automatically modifying all token hovers