JSFiddle - React, Tailwind, and code Playground

HTML

<div class="niz"></div>

CSS

.niz{
  width:100px;
  height:100px;
  border:1px solid #bbb;
}
.niz.red:hover {
    background: red;
}
.niz.blue:hover {
    background: blue;
}
.niz.green:hover {
    background: green;
}

JavaScript

var collor = ['red','blue','green'];
var niz = document.querySelector('.niz');
niz.onmouseover = niz_mouseover;

function niz_mouseover(event) {
	var set = 0;
  for(var n in collor){
  	if(niz.classList.contains(collor[n])){
			niz.classList.remove(collor[n]);
    	set = 1*n+1;
			if(set == collor.length) set = 0;
      break;
    }
  }
	niz.classList.add(collor[set]);
}