Class on different states are not being applied to those states.

Question

I'm trying to apply a class on hover of a component and the class is being applied but not on hover, it applies with normal state.

Please let me know if I'm looking into right feature or I misunderstood the feature.

PLNKR : https://plnkr.co/edit/Est6AnnGInBa3yvhzCvm?p=preview

I don't see anything in CSS or HTML itself that state that a particular class should be applied on hover or other states.

Please Help!

Thanks, Taufeek

NicoEngler · Accepted Answer

I have just checked and can confirm that it also works in your example. First add a class to your component, e.g. .text-blue-on-hoverNext, select the state you want to modify, e.g. hoverNow for instance change the color of the text to blue Result: Every time you hover over your component, the text is turned blue. Side note: The following css (or similar) is created automatically:

coder-strange · Answer

Now I get that, it works perfectly fine, I just didn't know that how it works. Thanks @NicoEngler for you this fast reply and clearing me out :)

NicoEngler · Answer

The class is applied regardless of the components state. Based on that, you can select a state, e.g. hover and style your class in that particular state. Effectively the following css will be created if you select the state hover and color your text red. I hope that clears up the confusion.

Class on different states are not being applied to those states.

Question

Answers (3)

Related Questions and Answers

Define selected class.

[QUESTION] replacing particular text in dropped component

How to update toolbar of component?

[QUESTIONS] Move panel to the left

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories