Make An Awesome Moving Background For Your Tabs Titles

Table of Contents

Let's learn how to create this awesome design! See the demo here!

To begin with, add an HTML element and copy the code

Make An Awesome Moving Background For Your Tabs Titles 1

Insert the HTML element anywhere in the page, preferably close to the tab element. Then, add this code to the HTML element.

   
 <script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hoverswitchere .elementor-tab-title').mouseenter(function(){
$(this).click();
});
$('.hoverswitchere .elementor-tabs-wrapper').append( "<div class='changing_background'></div>" );
});
});
</script>

<style>

.hoverswitchere.elementor-widget-tabs .elementor-tabs-wrapper {
justify-content: space-evenly;
display: flex;
}

.hoverswitchere .changing_background {
background-color: orange;
position: absolute;
width: 30%;
height: 59px;
z-index: -3;
left: 0%;
top: 0px;
transition: transform 0.7s cubic-bezier(1, 0, 0, 1);
}

.hoverswitchere .elementor-tab-desktop-title.elementor-active:first-of-type ~ .changing_background{
transform: translateX(19%);
}
.hoverswitchere .elementor-tab-desktop-title.elementor-active:nth-of-type(2) ~ .changing_background{
transform: translateX(124%);
}
.hoverswitchere .elementor-tab-desktop-title.elementor-active:nth-of-type(3) ~ .changing_background{
transform: translateX(221%);
}
@media (max-width: 1024px){
.changing_background{
display:none;
}
}

@media (max-width: 767px){
.hoverswitchere .elementor-tab-desktop-title{
display:none!important;
}
}
</style>

Then, add the class 'hoverswitchere' to the Elementor tab element

Add the class 'hoverswitchere to the tab element.

Now, adjust the code

Watch the video to learn how to adjust the code to make the design fit your particular scenario! A few very important informations are in the video, watch it carefully!

Finally, enjoy your awesome background changing tab element!

Let me know if everything works for you!

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments