Javascript 5秒后更改活动类（如果用户将鼠标悬停在项目上方，则阻止更改）

我正在构建一个简单的选项卡部分，其中每个选项卡每5秒都会激活一次

最初，我的演示中的

触发器1

将处于活动状态，然后在5秒钟后，目标是使

触发器2

处于活动状态（此时，

触发器1

将不处于活动状态），依此类推

除此之外，例如，如果

触发器1

处于活动状态，但用户希望访问

触发器5

，我希望超时功能在悬停在触发器项目上时暂停

我很难让下一个触发器显示为活动状态，并在鼠标悬停时暂停超时。

.trigger single

演示：

$（函数（）{
//将活动类添加到第一项
$（“.triggers.trigger single:first child”）.addClass（“activeTrigger”）；
//用户也可以在执行此操作时单击所需的触发器
$（'.triggers.trigger single'）。单击（函数（）{
$（“.triggers.trigger single”）.removeClass（“activeTrigger”）；
$（this.addClass（“activeTrigger”）；
});
//试图在5秒后激活下一个触发器
setTimeout（函数（）{
$（.triggers.trigger single”）.closest（.trigger single”）.removeClass（“activeTrigger”）.addClass（“activeTrigger”）；
},5000);
});
.triggers{
显示器：flex；
}
.单触发{
填充：10px 20px；
边框：1px纯灰；
光标：指针；
}
.主动触发器{
背景：浅蓝色；
}

触发1
触发2
触发3
触发4
触发5
@natel-这把小提琴不符合我的要求？你知道在那个例子中如何使用.hover吗？这是一个提示。至于超时和计数器部分，这里有一些代码可以帮助解决这个问题。你现在也许可以回答你自己的问题了。