▼
Streaming live at 10am (PST)

Adding hover to tabs?

#1

Hello,

How can I add hover to my tabs, when hovering over "woman health" I want that tab to show and then if I hover over "refills" or "your pharmacy", then it changes to those ones.

Is this possible?

https://preview.webflow.com/preview/lake-elmo-pharmacy?preview=d3d66010fc7e2cccb7b1930c0e04cc0e

http://lake-elmo-pharmacy.webflow.io/

#2

Hi @Quantumgo, is something like this example site, something that you are looking for?

https://webflow.com/website/change-tabs-on-hover

That is a change tabs on hover example, using a little custom code needed for the change of tabs on hover.

Does this help?

#3

@cyberdave Yes thats exactly what I'm looking for!!!

I'm looking at that now but I'm a tad confused as I don't see any transitions or interactions... :open_mouth:

#4

Hi @Quantumgo, Yes, that is because it is not using any, only the standard tabs widget, and then there is some custom code that detects when the mouse is hovered over the tab-link class and then performs a mouse click :slight_smile:

You simply need to assign each tab link with the class name "tab-link" and the paste the following into the custom code Footer of the site or page settings:

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

Here is a an article from the Help Center on using custom code: http://help.webflow.com/faq/how-to-add-custom-head-and-body-code-to-a-webflow-site

I hope this helps!

#5

@cyberdave oh awesome thank you so much!!

#6

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