Q:

Нужно циклировать код

let box = document.getElementById('box');
box.onmouseover = function(animate){
    box.style.backgroundColor = 'red';
    box.onmouseout = function(){
        box.style.backgroundColor = "";
    }
    box.onmouseover = function(){
        box.style.backgroundColor = 'yellow';
        box.onmouseout = function(){
            box.style.backgroundColor = "";
        }
        box.onmouseover = function(){
            box.style.backgroundColor = 'green';
            box.onmouseout = function(){
                box.style.backgroundColor = "";
            }
        }
    }
}
#box{
            width: 30%;
            height: 300px;
            margin: 0 auto;
            border: 2px solid #000;
            background-color: rgb(163, 0, 109);
        }
<div id="box">

    </div>

И так, я новичок в изучении JS и мне нужно сделать так, чтобы все цвета повторялись по кругу при наведении на них(красный, желтый, зеленый и опять красный...)из этого кода! 

A:

Циклирую код:

var colors = ['red', 'yellow', 'green'];
var colorIndex = 0;
let box = document.getElementById('box');
box.onmouseover = function(animate) {
  box.style.backgroundColor = colors[colorIndex];
};
box.onmouseout = function() {
  box.style.backgroundColor = "";
  colorIndex = ++colorIndex % colors.length;
};
#box {
  width: 30%;
  height: 300px;
  margin: 0 auto;
  border: 2px solid #000;
  background-color: rgb(163, 0, 109);
}
<div id="box"></div>

