Activate tab on hover instead of click

Design help General
1

Hi,

I’m trying to figure out if it’s possible to change the click function in this custom code to hover instead of click.

Right now it only works on click. It’s not working when i change the click to hover. Am i missing out something?

``

Here is my site Read-Only: LINK

2

There is no native Webflow option for this, but you should be able to achieve a programmatic click using custom code, when a hover event is triggered.

3

Hi Samliew,

Thanks for your reaction. I forgot to copy the custom code i used. I fixed the issue by using mouseover instead of hover.

<script>
$('.custom-button1').on('mouseover', function (evt) {
$('.target-tab-link1').triggerHandler('click');
evt.preventDefault();
});

$('.custom-button2').on('mouseover', function (evt) {
$('.target-tab-link2').triggerHandler('click');
evt.preventDefault();
});

$('.custom-button3').on('mouseover', function (evt) {
$('.target-tab-link3').triggerHandler('click');
evt.preventDefault();
});

</script>

Thanks!

3 Likes
4

Hi i’m about to implement this into a website i’m designing, but how does it effect the mobile experience for the tabs? Will the tabs still activate on click for Mobile?

5

Hi Jereme12393,

Yes the tabs will activate on click on for mobile.

You can try the link posted earlier.

Good luck implementing!

7

Hi Farid,
You can get this working by adding the custom code below.

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

If you are using links from outside the tab component see this link.
[Hover tabs](https://preview.webflow.com/preview/s-d-playground?utm_medium=preview_link&utm_source=dashboard&utm_content=s-d-playground&preview=5f11bb5f1920b3a2d49823c1f65a147f&mode=preview 58)

Good luck!

4 Likes
9

Looks like the class you gave your tab links is not the same as in the script. The script tells the class ‘tab-link’ to act hover. So change the tab-link in the script to the class you gave your tabs.

Place the script in the before body tag of your page settings.

https://s-d-playground.webflow.io/test

1 Like
11

@vanwoods This is gold! Thank you so much. Super useful as I’m planning to incorporate it into complex navigation.

12

Hey everyone. I have tried this for a long time now. Could someone please help me out and see what I am doing wrong?:pray:

Read only: Webflow - Lm17

1 Like
13

Happy Tuesday! @patryk.design I whipped up a cloneable + some code which should make it easier for you to implement.

Here’s the cloneable project:

And here’s the code + attribute:

15

Hey @DuncanHamra Thanks so much for this. Unfortunately I cannot get it to work. Could you please take a look at me read-only above and see if you can see what i am doing wrong? I would really appreciate it​:pray::pray:

Read-only: Webflow - Lm17

1 Like
16

You’re most welcome! Let me check it out…

This didn’t come up when testing, but it looks like I need to change the attribute. I’m going to update the MemberScript and attribute right now.

The new attribute is ms-code-onhover=“click”

Can you try it again for me? It should work this time. Thanks so much for reporting the issue! Not sure why the issue wasn’t effecting my test site.

18

I still can’t get it to work unfortunately…

19

Hello again. I still can’t get it to work. Would you please be able to help me with this?:pray:

20

Hey @edinsab :wave: Sorry for the delay, I need to turn on email notifications again.

Can you try cloning this, publishing, and letting me know if it works on your device? Maybe it’s a compatibility issue :thinking: Switch Tabs onHover - Webflow

1 Like
21

No problem man, thans for getting back to me :slight_smile: Yes its very strange. It does work on my device​:thinking:

22

I managed to get it to work now:) Thanks so much for your help.

1 Like
23

Hey, this is super useful! Thanks

1 Like
24

No problem! :grin: Happy to help.