Can't change color of tab links on hover and active state

[Mobo]

Hi everybody,

I am trying to change the color on hover and active state of my individual tab links. I can’t seem to figure it out however. Currently, the hover color only works for the tab that is active.

Here is my site Read-Only: https://preview.webflow.com/preview/live-scoring-microsite?preview=b9024194ccbcb885047f88273a8d0de3

Thanks for your help!

[deepvyas]

Did you looked into active tab CSS hover color ?

[cyberdave]

Hi @Mobo, could you also help to share what page the tab element is on and if possible screenshot showing the tabs element in the navigator?

[Mobo]

Sure. The tab is on the sports page “snowboarding”.

Here’s a screenhot:

[Mobo]

[garymichael1313]

Hi @Mobo,

Here’s a tip, that I didn’t know until I had your same issue. Tabs can be changed for:

1. The active “panel”
2. The “non-active” panel
3. Not active or non-active tab, which can happen too, but look at active “panels” first.

It tripped me out, but you can set hovers, focused, etc on your “Tab Button”, but that tab’s panel is on another panel that’s not tied to that button, it will actually show 2 different hovers.

When setting all your color changes:

1. Make sure you’re on the Button, but also you’re on that “Button’s Panel”, not another.
2. Use the background setting, not the image & gradient. (This gets confusing too, just use bg to simplify)

This will get your colors set properly, without pulling on your hair

[system]

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.