[mixtape]

Добрый день!

Имеется следующий кусок HTML разметки:

<div id="underheader">
      <div class="main_center over">
      <ul>
        <li>
          <div class="thumb">
            <a rel="link" href="#"></a>
            <div class="overlay_corner"></div>
            <div class="overlay_title">Современная архитектура и красивый дизайн дома</div>
            <div class="overlay_like">4</div>
            <img src="content/1.jpg" alt=""/>
          </div>
          <div class="desc">
            <p class="date">Июнь 13, 2014</p>
            <p class="stats"><span class="comment">2</span><span class="like">4</span></p>
            <h1><a href="#" title="">Современная архитектура и красивый дизайн дома</a></h1>
          </div>
        </li>
       </ul>
     </div>
</div>

DIVы с классами "overlay_title", "overlay_like" и A (c rel=link) выполняют роль оверлэев и накладываются с помощью относительного позиционирования на картинку, следующую после них в структуре DOM-дерева. В CSS-файле данным DIVам указан visibility со значением hidden.
Задача простая до нельзя - нужно на событие наведения по гиперссылке (которая имеет атрибут rel со значение link) повесить анонимную функцию, которая бы переключала у этих двух DIVов свойство visibility на visible, при onmouseout сново на hidden.
Имеем следующий сценарий:

window.onload = function () {
  //UNDERHEADER
  var underheader = gi("underheader"), //underheader
      a = getNode(underheader, "A", "rel", "link"), //выборка области клика
      title = getNode(underheader, "DIV", "class", "overlay_title"), //выборка заголовочного оверлея
      like = getNode(underheader, "DIV", "class", "overlay_like"); //выборка оверлэя с кол-вом лайков
  for(var i = 0; i < a.length; i++) {
     a[i].onmouseover = function(){visible(title[i]); visible(like[i]);};
     a[i].onmouseout = function(){invisible(title[i]); invisible(like[i]);};
  }
};
//ф-я выборки узлов tag из obj по атрибуту atr и его значению val
function getNode(obj, tag, atr, val) {
  var el = gt(obj, tag),
      res = [];
  for(var i = 0; i < el.length; i++)
    if(el[i].getAttribute(atr) == val) res.push(el[i]);
  if(res.length) return res;
  return false;
}
//ф-я выборки по id
function gi(id) {
  return document.getElementById(id);
}
//ф-я выборки по tagname
function gt(obj, tag) {
  return obj.getElementsByTagName(tag);
}
function invisible(obj) {
  obj.style.visibility = "hidden";
}
function visible(obj) {
  obj.style.visibility = "visible";
}

При запуске консольки браузеров выдают такой error:

Uncaught TypeError: Cannot read property 'style' of undefined

Все узлы выбраны верно. Теперь меняем сценарий так, чтобы на события назначались функции не в цикле for, в ручную, то есть просто убираем цикл:

a[0].onmouseover = function(){visible(title[0]); visible(like[0]);};
a[0].onmouseout = function(){invisible(title[0]); invisible(like[0]);};

И вуаля всё работает, но само собой так делать бред, ибо таких блоков у меня много и они дёргаются из БД. Пробовал через addEventListener, выдаёт аналогичную ошибку:

Uncaught TypeError: Cannot read property 'addEventListener' of undefined

Такое ощущение, что какой-то косяк с областями видимости или что-то типо того, но убейте не могу понять, где я накосячил. Я чего-то не понимаю?