How to disable hover animation in current state

[leon505 (Leon Neuhäuser)]

Hey,

I’ve added this video for a better understanding what the actual problem is. My intention was to add a nice effect when hovering over the tab. As you can see the 1px line (which is a div with 1px height) is fading in to the top when you hover in and fading out to the bottom when hover out. So for the current state of the tab I just added a bottom-border to the text element not the div. But the problem which occurs now is that the current state border is visible when hovering.

So how can I disable the hover effect when the state is on current?

Thanks in advance!

---

Here is my public share link: https://preview.webflow.com/preview/bouloumpasis-holding?utm_medium=preview_link&utm_source=designer&utm_content=bouloumpasis-holding&preview=b8d882a4371702751922120d5bc8cb52&workflow=preview

[abirana (Abi Rana | Creative Web Developer)]

I don’t think you can conditionally disable interaction.

But for a workaround you can apply custom CSS as below. This will target that underline under the current tab.

a.tab-link-pf.w--current .tab-underline {
  opacity: 0;
}