无法读取未定义错误的属性样式

Question

我得到一个无法读取未定义错误的属性样式，我不确定为什么它返回undefined。我试图让我的元素在鼠标悬停时改变颜色。我正在使用的代码是：

var icons = document.getElementsByClassName('icon');
for ( i = 0; i < icons.length; i++) {
    console.log(icons.length);
    icons[i].addEventListener('mouseover', function() {
        console.log(icons[i]);
        icons[i].style.color = "#00FF00";
    });
};

编辑：通过执行以下操作，我能够让它工作：

var icon = document.getElementsByClassName('icon');

function getValue(i) {
    return (i);
}

for (var i = 0; i < icon.length; i++) {
    icon[i] = getValue(i);
    icon[i].addEventListener('mouseover', function() {
        this.style.backgroundColor = "#00FF00";
    });
    icon[i].addEventListener('mouseout', function() {
        this.style.backgroundColor = "white";
    });
}