【js新手求助】想做一个js版的颜色选择器，但是color的值无法获取是怎么回事？

我想做一个颜色选择器，但是遍历之后无法获取到background-color的值，总是显示#000000，为什么呢？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>colorcard</title>
<script src="script/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#main .colorbox").mouseover(function() {
$("#color1").html($("#main .colorbox").css("background-color"));
});
});
var a = new Array("00", "33", "66", "99", "CC", "FF");
</script>
<style type="text/css">
body{
padding:0;
margin:0;
}
#head{
width:100px;
height:50px;
}
.color{
padding:0;
margin:0;
width:100px;
height:50px;
float:left;
border:1px #ccc solid;
text-align:center;
line-height:50px;
}
#main{
border:1px #999 solid;
clear:both;
background-color:#000000;
padding:0 1px 1px 0;
width:402px;
}
.colorbox{
float:left;
margin:1px 0 0 1px;
height:10px;
width:10px;
background-color:#ccc;
}
.sbox{
width:67px;
float:left;
}
</style>
</head><body>
<div id="color1" class="color"></div>
<div id="color2" class="color"></div><div id="main">
<script type="text/javascript">
for (x in a) {
document.write('<div class="sbox">');
for (y in a) {
for (z in a) {
document.write('<div style="background-color:#' + a[x] + a[z] + a[y] + ';" class="colorbox" id="' + a[x] + a[z] + a[y] + '"></div>');
}
}
document.write('</div>');
}
</script>
<div style="height:0; clear:both;"><div>
</div>
</body>
</html>