Как правильно использовать событие mouseover?

Question

[Сева Жидков]

У меня есть JS код:

var logoColor = 1;
      document.getElementById('logo').onclick = function () {
        if (logoColor == 1) {
          document.getElementById('extellipseid').style.stroke = '#00FFFF';
          document.getElementById('inellipseid').style.fill = '#00FFFF';
          document.getElementById('inellipseid').style.stroke = '#00FFFF';
          logoColor++;
        } else if (logoColor == 2) {
          document.getElementById('extellipseid').style.stroke = '#FF0000';
          document.getElementById('inellipseid').style.fill = '#FF0000';
          document.getElementById('inellipseid').style.stroke = '#FF0000';
          logoColor++;
        } else if (logoColor == 3) {
          document.getElementById('extellipseid').style.stroke = '#1CAC78';
          document.getElementById('inellipseid').style.fill = '#1CAC78';
          document.getElementById('inellipseid').style.stroke = '#1CAC78';
          logoColor = 1;
        }

Как Вы возможно догадались, он изменяет цвет нескольких элементов при нажатии на лого. Все нормально работает. Необходимо сделать так, чтобы цвет изменялся при наведении на лого мышкой, как на лого сайта Лебедева.
Просто заменить onclick на mouseover - не получается. Читал javascript.ru, не совсем понял систему. Прошу помочь, думаю, что это не займет много времени.

Answer 1

[Денис Инешин]

Например так: jsfiddle.net/p7D7B

Либо, если нужен перебор подряд, то так: jsfiddle.net/p7D7B/1

Answer 2

[Евгений Петров]

Добавлю.

1. onclick — не плохо, а очень плохо. Есть addEventListener.

2. Траверс (поиск) элемента нужно выполнить единственный раз и сохранить ссылку. А внутри обработчиков событий и ссылка не нужна — есть e.target, this и возможность пройти в дереве вверх.

3. Вам нужен не mouseover, а mouseenter, если только вы не горите желанием ловить все mouseout на внутренних элементах.