div随着鼠标的移动改变颜色示例 -- JavaScript教程

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>div随着鼠标的移动改变颜色示例</title>		
		<style type="text/css" media="all">
			body
			{
				color:#000;
			}
			.dreamdu:hover,.hover 
			{
				background: #3080CB;
				color: #fff;
			}
			div
			{
				width:300px;margin:10px;border:1px solid green;
			}
		</style>
		<script type="text/javascript">
			/*
			 * 功能：使div的背景随着鼠标的移动改变颜色
			 * 作者：可爱的猴子 www.dreamdu.com/blog/
			 */
			function DreamduColorfulDiv() 
			{
				var dreamdurows = document.getElementsByTagName('div');
				for ( var i = 0; i < dreamdurows.length; i++ ) 
				{
					if ( 'dreamdu' != dreamdurows[i].className.substr(0,7) ) 
					{
						continue;
					}
					if ( navigator.appName == 'Microsoft Internet Explorer' )
					{
						// ie不支持 :hover，所以...
						dreamdurows[i].onmouseover = function() 
						{
							this.className += ' hover';
						}
		
						dreamdurows[i].onmouseout = function() 
						{
							this.className = this.className.replace( ' hover', '' );
						}
					}       
				}
			}
			window.onload=DreamduColorfulDiv;
		</script>
	</head>
	<body>
		<div class="dreamdu"><a href="http://www.dreamdu.com/javascript/">JavaScript教程</a><a href="http://www.dreamdu.com/xhtml/tag_div/">div</a>标签</div>
		<div>这个没有改变颜色。</div>
		<div class="dreamdu">颜色随着鼠标的指向在变。</div>

</body>
</html>