One of Elementor’s versatile features is the tab widget, which allows us to organize content in a user-friendly manner. In this blog post, I will explore how to make the Elementor tab widget work seamlessly on hover, providing your visitors with a more engaging browsing experience.
Step 1:
To add the hover functionality for the tab widget, select the tab section and navigate to the Elementor left-side panel. Look for the “Advanced” tab and click on it. Here, you’ll need to assign a class name for the tab widget. In this case, the class name is “TabOnHover“.
Step 2:
Once we have added the class name, it is time to inject the JavaScript code that enables tab switching on hover instead of click. For this purpose, you can use the following code, as shown in the screenshot below.
Code
<script>
document.addEventListener('DOMContentLoaded',function(){
jQuery(function($){
$('.TabOnHover .elementor-tab-desktop-title').mouseenter(function(){
$(this).click();
});
});
});
</script>
This method is applicable to Elementor’s native tab widget. However, if you’re using other plugins like Elementskit, you can achieve the same functionality without the need to generate custom code.
Demo
Click on the image below to view the demo that I implemented on the MIS Solution website.
Happy Developing! ✌️