guys.

So i've got this code that runs a loop on slides/tabs and they have a sort of dropdown interaction to show and hide text based on the current/active slide/tab.

What I want to add is a function where, if a user hovers over one of the tabs(.loop-tab-link) that the clearTimout pauses until the user hovers out of the div.

As you can see I tried adding a mouseover function but that only adds an additional 5 seconds to the Timeout.

  clearTimeout(tabTimeout);
  tabLoop();


function tabLoop() {
    tabTimeout = setTimeout(function() {
        var $next = $('.loop-tabs-menu').children('.current:first').next();

        if($next.length) {
            $next.click(); 
        } else {
            $('.loop-tab-link:first').click();
        }
    }, 5000);
}

 $('.loop-tab-link').on('mouseenter', function() {
    clearTimeout(tabTimeout);
    tabLoop();
    });
$('.loop-tab-link').click(function() {
    clearTimeout(tabTimeout);
    tabLoop();
    });
});