Помогите пожалуйста дописать код, при первом наведении мышки на блок цвет фона должен становиться красный, при отводе мышки блок становиться снова фиолетовый (фиолетовый по умолчанию стоит в CSS), при втором наведении - блок становится желтым, при третьем - зеленым. При следующем наведении все начинается сначала: красный, желтый, зеленый. Так должно происходить бесконечно по кругу.
Код JS:
document.querySelector('.box').onmouseout = function () {
this.style.backgroundColor = '';
}
document.querySelector('.box').onmouseover = function () {
let countMouseOver = 0;
while (true) {
if (countMouseOver == 0) {
event.target.style.backgroundColor = 'black';
countMouseOver++;
}
if (countMouseOver == 1) {
this.style.backgroundColor = 'yellow';
countMouseOver++;
}
if (countMouseOver == 2) {
this.style.backgroundColor = 'green';
countMouseOver = 0;
}
}
}