Table of Contents
In this tutorial you are going to learn how to to open Elementor tabs on hover instead of click.
This works for both the new Elementor tabs element, as well as the 'old' one.
Here is a demo of what we will be creating:
Let's get started!
First, add this Elementor Open Tabs on Hover code
Add the code below in an HTML element, on the same page as you have the Elementor tabs that you want to be openable on hover.
Code for the new tabs element (the one container-based):
<script> /* Code from https://element.how/elementor-open-tabs-hover/ * Version 1.0 * Copyright 2023 Maxime Desrosiers */ document.addEventListener('DOMContentLoaded',function(){ jQuery(function($){ $('.hoverTabs .e-n-tab-title').mouseenter(function(){ $(this).click(); }); }); }); </script>
Code for the old tabs element:
<script> /* Code from https://element.how/elementor-open-tabs-hover/ * Version 1.0 * Copyright 2023 Maxime Desrosiers */ document.addEventListener('DOMContentLoaded',function(){ jQuery(function($){ $('.hoverTabs .elementor-tab-desktop-title').mouseenter(function(){ $(this).click(); }); }); }); </script>
Then, add the class name hoverTabs to your Elementor tabs element
Give your tabs element the class name hoverTabs under Advanced > CSS Classes.
Finally, enjoy your hover-able Elementor Tabs element!
I hope you found this useful!
Cheers!
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly