div实现下上键，鼠标mouseover事件 _Web前端

div实现上下键，鼠标mouseover事件
<html>
	<head>
		<title></title>
		<style type="text/css">
			div{
				width:200px;
				height:25px;
				border:1px solid;
			}
		</style>
		<script	type="text/javascript">
			
			//是否有div被选中
			var isSelect=false;
			
			function fun(obj)
			{
				alert(obj.value);
				var t=document.getElementById("t");
				var t_val=t.value;
				if(t_val.length>5)
				{
					t.value=t_val.substring(0,5);
				}
				
			}
			function fun1(obj)
			{
				obj.style.background="";
				obj.blur();
				isSelect=false;
			}
			function fun2(obj)
			{
				var divs=document.getElementsByTagName("div");
				for(var i=0;i<divs.length;i++)
				{
					if(divs[i].style.background.length==7)
					{
						if(i != obj.getAttribute("id"))
						{
							divs[i].style.background="";
							obj.style.background="#6699FF";
							obj.focus();
							break;
						}
						
					}
				}
				if(!isSelect)
				{
					obj.style.background="#6699FF";
					obj.focus();
					isSelect=true;
				}
			}
			function fun3()
			{
				var divs=document.getElementsByTagName("div");
				var len=divs.length;
				
				for(var i=0;i<len;i++)
				{
					var divcolor=divs[i].style.background;
					
					if(divcolor.length==7)
					{
						if(event.keyCode==38)
						{
							divs[i].style.background="";
							if(i==0)
							{
								i=len;
							}
							divs[i-1].style.background="#6699FF";
							divs[i-1].focus();
							break;
						}
						if(event.keyCode==40)
						{
							divs[i].style.background="";
							if(i==len-1)
							{
								i=-1;
							}
							divs[i+1].style.background="#6699FF";
							divs[i+1].focus();
							break;
						}
					}
				}
				if(!isSelect)
				{
					if(event.keyCode==38)
					{
						divs[len-1].style.background="#6699FF";
						divs[len-1].focus();
						isSelect=true;
					}
					if(event.keyCode==40)
					{
						divs[0].style.background="#6699FF";
						divs[0].focus();
						isSelect=true;
					}
				}
			}
			
			function fun4()
			{	
				var d=document.getElementById("d");
				d.focus();
				var divs=document.getElementsByTagName("div");
				for(var i=0;i<divs.length;i++)
				{
					
					divs[i].onkeyup=function(){fun3();}
				}
			}
		</script>
	</head>
	
	<body onload="fun4()">
		<div id="d" onmouseover="fun2(this)" onmouseout="fun1(this)"></div>
		<div id="d2" onmouseover="fun2(this)" onmouseout="fun1(this)"></div>
		<div id="d3" onmouseover="fun2(this)" onmouseout="fun1(this)"></div>
		<div id="d4" onmouseover="fun2(this)" onmouseout="fun1(this)"></div>
		<div id="d5" onmouseover="fun2(this)" onmouseout="fun1(this)"></div><br>
		<input id="t" type="text" onkeyup="fun3()">
		<input type="button" value="" onclick="">
	</body>
</html>