SOLVED: Background Color on Hover with a class

Bugs
1

Bricks Version: 1.5
Browser: Chrome 104.0.5112.81
OS: Windows

I’ve added 3 buttons to a blank page
I’ve created a class and edited the hover state so the the background color and text color change

That works

HOWEVER, if I edit the normal background color of the buttons the hover effect (for the background stops working).

The text color change still works.

I am probably doing something stupid and am more than willing to accept that :wink:

2

Hi Mark,
Thanks so much for your report!

Unfortunately, I cannot reproduce the issue. Is it possible that you assigned the background color to the ID instead of the class?

Best regards,
timmse

3

Absolutely willing to be doing something wrong, but not sure what…

4

Thanks for the video! With sound would have been even nicer (and easier to follow) :sweat_smile:
As I said, you added the background color to the ID in the normal state - which always has more weight than a class.

Bildschirmfoto 2022-08-22 um 18.14.45
Bildschirmfoto 2022-08-22 um 18.14.45340×562 63.2 KB

Remove the background color from the ID, select the class, add the background color again and it will work.

Best regards,
timmse

5

Ah… that makes sense, I thought it would be something stupid.

Shame it won’t solve my use case… wanted the buttons to have different colours for the normal state and then the same hover colour!

6

Then you have to use different classes - there is no other way in this case.

7

Hiya, I’m wondering how to make this on my website. I understand the class aspect and setting the attributes in the CSS. However, I’m not sure how to get the background colour of an element to change when hovering over. Is it via the Interactions bit?
And is it using Attributes, or something else? It’s at this bit that I get lost.

Thanks in advance for any help!

8

Hey @Martine,

this is all done using “hover” pseudo-class, using the UI. You basically just click on the element you want to change on hover (or select a class, if you want to add :hover to class), then you click on the pseudo-class selector, and select a :hover, then change the colors and styling, and they will be applied on a hover.
CleanShot 2025-02-01 at 19.23.20@2x

If you want a bit more info on this, feel free to record a video where you got stuck and I’ll explain more :slight_smile:

Thanks,
Matej