Am I just missing this or does this not work? I’m attempting to add a ACSS class to the ‘hover’ state of an element, but its being applied to the non-hover state. Is there a trick I’m missing?
Hey Lyle,
You cannot add a class on hover with CSS. For this purpose, you’d need to use Javascript, which can add stuff to the DOM. That’s not possible with CSS only.
Best regards,
timmse
Hmm… not to bring up the ‘other’ builder, but in O, you could actually select the hover state, and apply specific styling just to that state with a class. I’m guessing this is a limitation then in Bricks and I have to manually set the hover styling I need for the elements on the ID vs. via a class like I could in O for each element.
Can you make a video of how you do it in Oxygen?
This is another site, but its basically showing that I’m adding a class, and only applying styling to the ‘hover’ state. There is no other styling on this class.
It seems you were not doing the same in Oxy.
In Oxygen, you choose hover state > and you select a class, then the state has returned to default state > you choose the hover state again > then you start styling there.
In Bricks, you are not doing the same.
You can actually create a class(just for the hover effect) > style it in hover mode > apply the class to the element.
Then, you can achieve exactly what you want to achieve like Oxygen in Bricks.
Please correct me if I got you wrong. 
My goal is to use an existing ACSS class however. In O, I can pick Hover, and then assign a ACSS class to it whereas in B, I can’t.
1 Like
@ocbroadband Kevin (@digitalgravy ) is the man behind ACSS. Also report this in the ACSS community too
That’s inaccurate. You can’t/aren’t “Adding” a class on hover in Oxygen. @jornes is correct in what he pointed out here.
If you aren’t seeing a hover state that should be applied by ACSS then that should be reported to ACSS (as they have hover states built into their css file to take care of hovers automatically)
Well, not quite. You assign the hover state to the class, not the class to the hover state.
Select a class in Bricks, click the states icon, add the hover state, change the settings and that’s it.
Even if you do it the other way around in O (as far as the order of your actions is concerned), the hover state will still be added to the class and not the other way around.
1 Like
Don’t get me wrong here guys, I may have reversed what my intent of relaying is. I am by all means not a CSS expert and I’m still grasping this stuff. So, I guess my question is then, in O, I can have it apply only to specific states vs. the entire element based on what I’m seeing it do. At least, thats my perception.
So lets reverse this question, is is possible to have a predefined class, and have it only affect a specific state on an element? I guess that might be more in line with what O does. Or am I still a bit off?
Thanks for all your guideance!
Hi @ocbroadband
Here’s how the same can be done in Bricks:
Thanks. I knew how to do it with creating my own class, but I was looking to utilize an existing ACSS class. For example, to change the background of a card to a ‘hover’ version in ACSS. I can’t apply that bg–primary-hover to the card because it affects the entire card, not just when I want to use it for the hover state. I mean, i can go figure out what the color is, and create another class, but that kind of defeats the purpose really of just using the existing class name.
Thank you for the run-through however, that confirms what I was doing as a work around.
If its just the color your after cant you get it from the --primary or which ever variable color your after from ACSS? So like var(–primary) in the BG on hover state psuedo just make sure you choose RAW in the color input box. I just tested it on 1.5 and it worked.
Thanks, I’ll give this a go.