在写某个网页作业时,要用到这个基本技能,就是鼠标放到某一选项上变个色,移开后又变回来。
这个在网页中很常见,实现也很简单,写一个小的例子,放在这里方便以后作为模板用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js控件停留事件</title> <link href="../css/my.css" rel="stylesheet">
<script type="text/javascript"> window.onload = function(){ var arr = document.getElementsByName('mytype'); for(var i = 0;i<arr.length;i++){ arr[i].onmouseover = function(){this.className = 'td1';}arr[i].onmouseout = function(){this.className = 'td2';} } }
</script>
<body> <div id="main" style="margin:auto 0"> <div style="margin-top:2em;" align="center"> <div name = "mytype" class = "td2">控件一</div> <div name = "mytype" class = "td2">控件二</div> <div name = "mytype" class = "td2">控件三</div> <div name = "mytype" class = "td2">控件四</div> </div> </div> </body> </html>
在css文件夹中的my.css
.td1{background-color:#666666;height:50px;
}.td2{background-color:#ffffff;height:50px;
}