Streaming live at 10am (PST)

Activate tab pane on tab Hover rather than click


I am trying to make the tabs on the page below active the specific pane when hovering over tabs rather than the default on clicking the tabs:
Page Named: (Sensing+ for Agriculture new (most recent) )

I have read that you need custom code to do this and I have added the code that was recommended on this forum: Activate tab on hover instead of click

I added the code to the “custom code” of my project. Code below:

Not sure what I am doing wrong here. Could someone please assist me? It’s a bit time sensitive so hoping to resolve ASAP. Thanks!

read-only link:

Here is my site Read-Only:

Hi rlowe1228,

The post where you are referring to is not exactly the same as the tabs on your website. It works with extra buttons outside the tab component.

So you have to change the code a bit:
<script> $('.tab-link').hover( function() { $( this ).click(); } ); </script>
and give your tab links the class name of “tab-link”.

That should work.

1 Like

@vanwoods thanks for your reply! But I tried this code and still not working…

I added the above code and replaced (’.tab-link’) with (’.new-tab’) which is the class name of my tab links.


That should be working. Are you aware that custom code will not work in preview mode? You have to publish the site in order to see custom code working.

@vanwoods Yes, I am aware of that. It’s unfortunately still not working in live mode…

I can’t see the script code anywhere in the code of the page. So it looks like it isn’t implemented right. When i check your preview the script isn’t in the “Before body tag” custom code area of the page? I do see this script: <script> fbq('track', 'ViewContent'); </script>

It should work fine as seen here:
inspect the code and you can see the script at the end of the code.

The code I get from that example page you just sent is:

Which is the code I had previously had until you had mentioned I needed to change it.

I have now changed it back to this original code.

I have given my tabs a class of: custom-button1, custom-button2, custom-button3
And the tab panes a class of: target-tab-link1, target-tab-link2, target-tab-link3

It seems as this code is correct I just must be setting up the classes wrong? I’m not sure. It doesn’t make any sense to me as it seems as everything is in place properly.

Read only:

@Brando could you help me out with this topic? I can’t figure out what’s wrong and it’s driving me crazy.

1 Like

@vincent could you help me out with this topic? I can’t figure out what’s wrong and it’s driving me crazy.

Don’t use spaces in class names, your code will not function properly!

use ‘new-tab’ instead of ‘new tab’ for the tab links and also change this in the custom code script.

The script used isn’t correct it is used in a situation where i used links outside of the tab component. So i don’t know why this is in your code? I referred to the script below in my first post, change .tab-link to .new-tab (as the class of your tab links are now new-tab) and it should work.

1 Like

That code is not working…

Finally got it! Thanks @vanwoods

Happy to hear you were able to get this working @rlowe1228 — thanks for the help @vanwoods :tada: :smile:

Would you happen to have a cloneable version of the hover tabs?

You can clone it now:

1 Like