مشکل این کد چیه؟(مربوط به رویداد ماوس و css)

سلام
این قطعه کد یه لیست می سازه و قراره وقتی ماوس روی گزینه هاش حرکت می کنه رنگ زمینه شون تغییر کنه ولی خوب تغییر نمی کنه:20:
مشکل کجاست؟

کد:

---

for(j = 0 ; j < temp.length ; j++){
                        var temp2 = temp[j].split('~');
                        var oDiv = document.createElement('div');
                        oDiv.onmouseover = function(){
                            this.style.backgroundcolor = "red";
                        }
                        var oImg = document.createElement('img');
                        var oText = document.createTextNode(temp2[0]);
                        oImg.setAttribute('src', temp2[1]);
                        oImg.setAttribute('width', 30);
                        oImg.setAttribute('height', 30);
                        oDiv.appendChild(oImg);
                        oDiv.appendChild(oText);
                        DFragment.appendChild(oDiv);
                       
                    }
                    oMainDiv.appendChild(DFragment);

---

حرف اول کلمه color باید با حروف بزرگ نوشته بشه:

کد:

---

oDiv.onmouseover = function(){
        this.style.backgroundColor = "red";
}

// or

oDiv.onmouseover = function(){
        this.style.cssText = "background-color:red";
}

---

چرا از jquery استفاده نمی کنید خیلی آسون تره اگه می خواین اینه:
[HTML] $('#id').mouseover(function(){$(this).css('backgro und-color','red');});[/HTML]

بعد هم به اون div یا span یا table یا tr یا td یا ... آی دی مورد نظرتون رو بدید و جای #id آی دی خودتون رو بذارید ولی # رو بر ندارید وگرنه کد کار نمی کنه.