Как сделать циклическую смену 3х цветов фона div при наведении и отведении мыши?

Question

[tempfolder]

Подскажите, пожалуйста, завис над задачей, начинал вникать в event.
Собственно задача: есть минимально стилизованый div,

#box {
     width: 300px;
     height: 300px;
     border: 1px solid #000;
     margin: 100px auto;
     background-color: darkviolet;
}

при первом наведении мыши на элемент он меняет цвет на зелёный, при отведении с элемента сбрасывает на стандартный, при втором наведении уже на жёлтый, обратно опять дефолтый цвет, при третьем на красный и обратно и так по кругу до бесконечности, зелёный - жёлтый - красный.
На сколько я понимаю реализовать это нужно через addEventListener - 'mouseover/mouseout'.
Делаю 6 ивентов (по 2 на каждый цвет):

box.addEventListener('mouseover', function (event) {
        this.style.backgroundColor = 'red';
    });
    box.addEventListener('mouseout', function (event) {
        this.style.backgroundColor = '';
    });

Но как реализовать цикл, а тем более последовательную смену цветов без понятия, как вариант был поставить каждым 2м ивентам условие с counter-ом, но куда-то не туда..

let box = document.getElementById('box');
let counter = 1;

if (counter === 1) {
    box.addEventListener('mouseover', function (event) {
        this.style.backgroundColor = 'red';
    });
    box.addEventListener('mouseout', function (event) {
        this.style.backgroundColor = '';
        counter++;
    });
}
...
else if (counter === 3) {
    box.addEventListener('mouseover', function (event) {
        this.style.backgroundColor = 'green';
    });
    box.addEventListener('mouseout', function (event) {
        this.style.backgroundColor = '';
        counter = 1;
    });
}

Answer 1

[0xD34F]

const el = document.querySelector('#box');
const colors = [ 'red', 'green', 'blue' ];
let index = -1;

el.addEventListener('mouseenter', function() {
  index = (index + 1) % colors.length;
  this.style.backgroundColor = colors[index];
});
el.addEventListener('mouseleave', function() {
  this.style.backgroundColor = '';
});

Answer 2

[Karpion]

Занумеруем цвета произвольным простейшим образом. При загрузке страницы - некой статической переменной присвоим номер, соответствующий зелёному.

При наведении курсора - присваиваем фону цвет, соответствующий этой переменной. А саму переменную переводим в следующее состояние; при этом помним, что состояния закольцованы.

Если цвета занумерованы, начиная с нуля - то переход к следующему делается по формуле n = (n+1) mod 3, где три = количество цветов в цикле; а mod = остаток от деления.

Думаю, д.б. понятно.