Text inside a link block not change color on hover

Hi, I am trying to use link block to create an effect where the background and the font change color when you hover on it. I’ve added the transitions and changed the color on hover state for both link block and the text inside. But it still doesn’t work. Is it a bug or if anyone can help me to take a look?

Here is my site Read-Only
https://preview.webflow.com/preview/yuerans-fresh-project?utm_source=yuerans-fresh-project&preview=17bf56c3043105a3944e8cb654b8f881

Screenshots here:
before hover
06%20PM
after hover
18%20PM


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Yueran @yuyu731

You have a font colour style applied to the element H3 Heading 8 - Darker Grey.

Enlarge the image to full height and highlighted setting to change.

Remove that style and it should work as you want it to.

Hope that helps.

Yay! It worked. Thank you so much for your timely response!!

1 Like

You’re welcome. :sunglasses:

Don’t forget to mark as RESOLVED so others may also see the solution if they experience the same issue.

Cheers
Keiran

Hi knk,

When I am utilizing the logo element on other pages, it is still working weird. Even though it is a symbol and functioning normally on the homepage(home), but on other pages(jet insider page), I expect the color to be white when not hovering but it is still blue. can you help me to take a look?

https://preview.webflow.com/preview/yuerans-fresh-project?utm_source=yuerans-fresh-project&preview=17bf56c3043105a3944e8cb654b8f881

Thank you!

1 Like

Hello @yuyu731

I see that you logo is blue because the darker gray color is coming from the CURRENT state. The logo links to the home page and the gray color is added when the CURRENT state is active. Here’s a screen record where you can see how to fix the problem > https://www.useloom.com/share/ecdc6f9c5fc247d2b25b89045539e309

Piter :webflow_heart:

Hi @yuyu731,

sorry for late reply have been offline for a few days.

As @PeterDimitrov has highlighted, the ‘logo section’ symbol you have created is part of the ‘Home’ page, so when you make a change to any of the settings to that symbol while on the ‘Home’ page (in the designer) it will effect changes of the ‘Current’ state.

‘Current’ state because you are on the page that the symbol is linked to. If you go to a different page (‘Jet Insider’) and make changes to the symbol, those changes will be reflected on all other uses of the symbol throughout your site.

Can be a bit confusing, but it’s a really easy ‘trap’ when making changes to links.

Piter’s video shows very nicely how to make the changes.

Regards,
Keiran

2 Likes

Thank you!! this is super helpful

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