Streaming live at 10am (PST)

Activate tab on hover instead of click


#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!


#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!