Как менять цвета фона при наведении на объект?

Question

[Лев Салатов]

Как реализовать эффект как в шапке на сайте Лебедева?

Т.е., при наведении на логотип меняется цвет шапки. Но меняется циклично.
Есть цвета: синий, красный, оранжевый и каждый раз при наведении на логотип цвета должны сменять друг друга по кругу.

Answer 1

[0xD34F]

Складываете цвета в массив:

const colors = [ 'red', 'orange', 'yellow', 'green', 'aqua', 'blue', 'magenta' ];

Объявляете переменную - индекс текущего цвета:

let index = -1;

По событию mouseenter делаете индексу + 1 и меняете цвет background'а:

hoverEl.addEventListener('mouseenter', () => {
  index = (index + 1) % colors.length;
  colorEl.style.backgroundColor = colors[index];
});

https://jsfiddle.net/3gh7t2jz/

Answer 2

[leni_m]

https://codepen.io/anon/pen/agxqjK