JSFiddle - React, Tailwind, and code Playground
HTML
<div class="header_Icons_Main">Header Icon 1</div>
<div class="header_Icons_Main">Header Icon 2</div>
CSS
.header_Icons_Main {
color:#000;
}
.header_Icons_Main:hover,
.header_Icons_Main.hover {
color:#f00;
}
JavaScript
$(document).ready(function(){
function setHover(el) {
$(el).addClass('hover');
}
function removeHover(el) {
$(el).removeClass('hover');
}
function sequentialHover() {
$('.header_Icons_Main').each(function(i, el) {
setTimeout(function() { setHover(el); }, i * 1000);
setTimeout(function() { removeHover(el); }, (i * 1000) + 1000);
});
setTimeout(sequentialHover, 2000);
}
sequentialHover();
});