Streaming live at 10am (PST)

Hover and no underline on grey, and stay black and underlined on current

We can’t seem to figure this out despite this being seemingly simple to do…

We have a tab with 4 tab items: All, Toners, Serums, Moisturizers.

What we want to do:

  1. When there is no hovering on any of the tabs, tab text should all be black. When we hover over one tab, this tab should remain black text while the other tabs will turn grey. We sorta got half of that, just cannot seem to figure out how to keep the tab that we are hovering on to stay unaffected by the mouse hover trigger. How can fix this?
  2. If the user is on the current tab, the underline should remain. We got the underline to appear on hover and disappear when hover out. But cannot seem to get it to stay if the user is on the current tab…

Here’s pretty much what we want to achieve:
https://test-ep-website.webflow.io/untitled

Thanks!!!


Here is my site Read-Only: https://preview.webflow.com/preview/test-ep-website?utm_medium=preview_link&utm_source=designer&utm_content=test-ep-website&preview=3f0a7d688386b736f7b6761ffbcac88b&pageId=5f3741de575933b01155a743&mode=preview

Hi!

I have attached a short clip of what I think you are trying to achieve. How are your Webflow interactions skills like?

nav link

It is basically set up so that each link is labeled the same CSS tag. And the text inside, to be labelled under a unique class name. And you need to have a separate animation that makes all text (other than the one its hovering) to be grey. And on hover out. you need to use the same animation that makes all text black.

Screenshot 2020-10-09 at 13.43.42

If you do this for all 4 nav links it will give the same effect. I also animated the line like the video but not sure if that’s what you wanted.

Can send screenshots on how to set that up too if you wish!

Best regards,

Steve | 3SIX5 Digital

Hi @3SIX5_Digital Steve ,
Thanks for your detailed reply! Very much appreciated :slight_smile: We followed your instructions and managed to get the grey on hover trigger. Sweet!

We still have not figured out how to get the underline to stay when it is on the current page i.e. say we clicked on tab A, and user gets to the page associated with tab A, the tab underline under tab A needs to remain…

We know we can’t do it from Style property, as the underline is a separate div block, rather than an underline as part of the font style. We tried utilising the mouse click (tap) trigger, but the underline still won’t show up when it’s suppose to?

Here’s the read-only link

Hi!

That’s great that you have figured it out, glad to help out.

In regards to the current link. What I did was set the bar to ‘absolute’ and then I added a separate border line at the bottom of each link turn it white. And on the ‘active’ link I added the colour to the link, matching the underline animation. So it basically stays there after you hover out.

Hope that helps, I’ll try and do a quick video if you still get stuck!

The Read-only link has stopped working for some reason, so I cant’ send any screenshots… but let me know if you get stuck!

Best of luck,

Steve

Hi @3SIX5_Digital Steve,

We tried to do what you described. But we probably missed something here… :thinking: Sorry to come back to you on this!

The initial state for the original pink underline got a size 0. We set the size of the pink line to ‘auto’, so the line extends from left to right when mouse hovers over the nav item.

Since we added a bottom pink border to the current nav item, we ended up having a thicker pink border when hover in and out over the current nav item because of the original pink underline.

We don’t suppose there’s a way to only turn off the the underline animation for the current tab underline when hovering over the current tab? That would then avoid have 2 pink underlines.

We created a new read-only link here

Thank you :slight_smile:

Hi,

I see the issue you have. Basically to fix this issue, first you need to add a class to the surrounding div that hold the text link and underline. Secondly, change the position of the element too ‘Relative’.

Thirdly, you need to change the position of the line bar to ‘Absolute’. And the placement to bottom wide. See below.
Screenshot 2020-10-12 at 23.54.56

This will fix your issue!
If you use the same CSS for each link block and make it into a Symbol, it will save a lot of time :slight_smile:

Hope that helps!

Best of luck,

Steve

1 Like

YOU’RE AWESOME! :partying_face: :partying_face: :partying_face: :partying_face:

It’s now exactly how we want things to behave. Thanks so much for taking the time to help us on this :clap:t2: :clap:t2: :clap:t2:

1 Like

Happy to help :slight_smile:
I know it can be frustrating when you start learning more complex things in Webflow, but it gets easier I promise! And it’s such a relief when you find the problem from making something work! Have fun!

Best wishes,

Steve

1 Like