@tempfolder

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

Подскажите, пожалуйста, завис над задачей, начинал вникать в 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;
    });
}
  • Вопрос задан
  • 87 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега JavaScript
const el = document.querySelector('#box');
const colors = [ 'red', 'green', 'blue' ];
let index = -1;

el.addEventListener('mouseover', function() {
  index = (index + 1) % colors.length;
  this.style.backgroundColor = colors[index];
});
el.addEventListener('mouseout', function() {
  this.style.backgroundColor = '';
});
Ответ написан
@Karpion
Занумеруем цвета произвольным простейшим образом. При загрузке страницы - некой статической переменной присвоим номер, соответствующий зелёному.

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

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

Думаю, д.б. понятно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
27 янв. 2021, в 04:19
2500 руб./за проект
27 янв. 2021, в 00:37
11111 руб./за проект
26 янв. 2021, в 23:30
3000 руб./за проект