Tabs - hover in makes tab active. Hover out tab inactive

Hi All,

I would like my hover in and hover out to make my tabs become active and inactive. I was able to find a very useful custom code script on this forum that does half the job but does not make the tabs inactive on hover out. ie. the tabs section remains shown after hover out.

I really hope that makes sense, I have included my read-only link below.

the script I have been using is:

<script>
$('.tab-link').hover(
  function() {
    $( this ).click();
  }
);
</script>

Here is my site Read-Only: [LINK](https://preview.webflow.com/preview/case-study-2-23ad69?utm_medium=preview_link&utm_source=designer&utm_content=case-study-2-23ad69&preview=0e3c89b36c77dbc0abf75ca7ab35723b&workflow=preview)

here is the staged published site to see embedded code in action : https://case-study-2-23ad69.webflow.io/

1 Like

Maybe you can do this in pure webflow

  1. assign the menu item and the tab content which is linked to the same class which will be different for each tab.
  2. create an anim hover in which target this combo class and say that in over the content of the table is visible (this time in the anim we just target the element not the class.)
  3. in hover out on the custom class which includes both the content and the menu item we hide the content of the mega menu.

To do that, you should maybe not use a tab element on which you don’t have total control but redo everything from scratch.

Translated with DeepL Translate: The world's most accurate translator (free version)

Happy Tuesday! I whipped up a cloneable + some code which should make it easier for everyone to implement this in the future.

Here’s the cloneable project:

And here’s the code + attribute: