JSFiddle - React, Tailwind, and code Playground

by MotoTony

HTML

<div class="abc">1</div>
<div class="abc">2</div>
<div class="abc">3</div>
<div class="abc">4</div>

CSS

.abc{width:150px;height:150px;float:left;}

JavaScript

var dlcColors = [
    'rgb(233, 147, 26)', 'rgb(22, 145, 190)', 'rgb(22, 107, 162)' , 'rgb(27, 54, 71)'
	];
	var i = 0;	
	var dlHColors = [
    '#000', 'rgb(22, 145, 190)', 'rgb(22, 107, 162)' , 'rgb(27, 54, 71)'
	];
	var g = 0;

	$('.abc').each(function() {
       $(this).hover(function() {
       $(this).css('background-color', dlHColors[g]);
       g = (g + 1) % dlHColors.length;
       }, function(){
       $(this).css('background-color', dlcColors[i]);
       i = (i + 1) % dlcColors.length;
	   });	
	});