O que tem de errado com este código?

Devo criar um código no qual, quando o ponteiro do mouse passa em cima de um número par ele fique azul, e ao passar o mouse em cima de um número ímpar ele fique vermelho. O código não funciona e não se o que há de errado nele.

<html>
	<head>
	<script type="text/javascript">
		function mousein()
		{
			for (var t1 in document.getElementById("t1"){
				document.getElementById("t1").style.color = "blue";
			}
		}
		function mouseout()
		{
			document.getElementById("t1").style.color = "black";
		}
		function mousein1()
		{
			document.getElementById("t2").style.color = "red";
		}
		function mouseout1()
		{
			document.getElementById("t2").style.color = "black";
		}
	</script>
	<title></title>
	</head>
<body>
<script>
	for(i=0;i<=10;i++){
		if(i % 2 == 0){
			document.write('<div id="t1" onmouseover="mousein()" onmouseout="mouseout()">'+i+'</div>');
		}
		if(i % 2 == 1){
			document.write('<div id="t2" onmouseover="mousein1()" onmouseout="mouseout1()">'+i+'</div>');
		}
	}
</script>
</body>
</html>