Elementor Open Tabs On Hover Instead of Click

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> 
/* Please login to get the code 
 * The code will be for the Elementor Open Tabs On Hover Instead of Click tutorial 
 * Found at this URL https://element.how/elementor-open-tabs-hover/ 
 */ 
</script>

Code for the old tabs element:

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Open Tabs On Hover Instead of Click tutorial 
 * Found at this URL https://element.how/elementor-open-tabs-hover/ 
 */ 
</script>

Then, add the class name hoverTabs to your Elementor tabs element

Give your tabs element the class name hoverTabs under Advanced > CSS Classes.

Extra: Add a Fade In Animation to the Elementor Tabs Content

Add this code at the bottom of your HTML element to have a fade in on your tabs content. Adjust the timing as you wish.

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Open Tabs On Hover Instead of Click tutorial 
 * Found at this URL https://element.how/elementor-open-tabs-hover/ 
 */ 
</script>

Note that the fade in code will only work if you gave your Tabs element the class name "hoverTabs", as explained in the prior step.

Extra: Much more Tabs Features

If you would like even more features, check the Elementor Horizontal Scroll Menu, Taxonomy, Tabs With Images Premium tutorial. This is what that premium tutorial shows you:

Features:

• Polyvalent: Works for the WordPress Menu, Taxonomy Filter and Tabs elements
• Arrow Control: Left and right arrows to scroll (accessible)
• Reactive Arrows: Arrows become unclickable and lower opacity if you can't scroll in that direction
• Conditional Arrow Display: The arrows only show if horizontal scrolling is possible
• Conditional Gradients: Left and right gradients in the directions where scroll is possible
• Image Design: Optional circle image design, with active styling and transition
• Great UX: Automatically scrolls to the center of the clicked item
• PageLoad Smart: Automatically scrolls to the center of the current menu item (if one of them is the current page), current taxonomy filter, or current tab
• Open Tab: Scroll to and open the proper tab on page load through an ID in the URL (site.com/#example-id)
• Auto Scroll Back Up: On Tab Switch, automatically scroll back up to the top of the tabs element. Useful if your tabs titles are sticky

Finally, enjoy your hover-able Elementor Tabs element!

I hope you found this useful!

Cheers!