JavaScript events, can't they work on two elements at a time?

Question

I have a menu bar with 6 buttons inside <a> tags like this:

<a href = "#"><button class = "favnav"></button></a>

My JavaScript code looks like this:

window.onload = function() {
    var x =
        document.getElementsByClassName("favnav");

    var a = document.getElementsByTagName("a");

    for (var i = 0; i < x.length; ++i)

    {
        x.item(i).onmouseover = function(obj) {
            obj.target.style.backgroundColor = "rgb(0,106,106)";

            a.item(i).style.color = "rgb(0,128,128)";
        }
    }
}

The problem is that, I can see the effect in the button element on hover, but there is no change in the a elements text color text color. What's wrong? Please ignore any syntax error, I am typing the code by hand.