Activate tab on hover instead of click

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

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.

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!

2 Likes

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?

Hi Jereme12393,

Yes the tabs will activate on click on for mobile.

You can try the link posted earlier.

Good luck implementing!

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!

1 Like

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.

1 Like