Elementor Open Tabs On Hover Instead of Click

Elementor Open Tabs On Hover Instead of Click

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.

Elementor Open Tabs On Hover Instead of Click 1

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.

Elementor Open Tabs On Hover Instead of Click 2

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.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

Leave a Reply