CSS Pseudo-classes and dynamically generated style attributes

[mmaedche]

Hi,

I was wondering if there a way to add dynamically generated style attributes to CSS Pseudo-classes like :hover, :before, :after and so on.

Let say I want to create a Gutenberg block where the user can select a link color via the ColorPalette component. Now I also want to give the user the availability to select the color for the ‘:hover’ state with another ColorPalette component.

How is it possible to add such a CSS Pseudo-class?

CSS Pseudo-classes will not work with inline styles but maybe there is a workaround.

Thanks

[Zac Gordon]

What’s the specific use case you’re trying to do? There may be another appropriate works around native JS limitations on adding pseudo classes on the fly.

[mmaedche]

I don’t have specific use case currently. I’m just playing around with Gutenberg and test how it works.

To keep it simple, lets take this link example above.

How can the selected color assigned to the ‘:hover’ state?

[Zac Gordon]

I would check out the 1st and 2nd suggestions here for a discussion on this… like I said, not really a nice elegant solution unfortunately (that I’ve seen)

https://stackoverflow.com/questions/28365233/inline-css-styles-in-react-how-to-implement-ahover

[Author]

Posts