3 Button Interaction testing Help

[T-low]

Hello, I wanted to play a little with interactions.

I watched this video: simple dropdown interaction by @Louis and had no problems applying it.

For a “simple” test i whanted to create the following:

So I have my 3 Buttons (Divs)

I added a interaction to the first button:

This should trigger a global class “my-button-color”, which should apply to my “button 2”.

So in the first step I try to display Button 1 & 2 side by side and start changing the color.

And here is the first error: the class “my-button-color” should change the color of button 2 to blue, which doesn’t work. I added a hover effect to the “my-button-color” class, which works on hover.

So the first questions on this crazy post

Why doesn’t the background color of button 2 change? I have some to no programming knowledge, but I think it’s because of inheritance in CSS? How could I prioritize my global class? Or is there a better method?

Allso, I really miss a tutorial that shows some small interactions with only minimal styling to better understand the different methods of usage.

[Marius]

Since the block class has the highest priority, you can’t apply a global class to change a style which you already applied the block class itself through the editor.

You need to do that via Relative Styling to achieve a higher specificity.

Once created this class inside the Relative Styling panel, go inside the Relative Styling Editor and apply your changes, like background color.

[T-low]

Thank you @Marius, works like a charm