<!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=gb2312" />
<title>无标题文档</title>
<style>
*{ padding:0; margin:0; }
ul,li{ list-style:none; }
ul{ width:800px; margin:0 auto; overflow:hidden; }
li{ float:left; width:90px; margin:4px 0; padding:0 5px; font:12px/24px; color:#333; height:24px; overflow:hidden; }
</style></head>
<body>
<ul id="ul">
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
<li>li11</li>
<li>li12</li>
<li>li13</li>
<li>li14</li>
<li>li15</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li>
<li>li16</li></ul></body>
</html>
鼠标经过li行变色
window.onload = function() {
var ul = document.getElementById('ul');
var obj = ul.getElementsByTagName('li');
var color = '#800000';
//遍历li集合，按每8个li为一行，给每个li加上相应的类名以标识所在行号
for(i = 1; i <= obj.length; i ++) {
var LN = Math.ceil(i / 8);
obj[i-1].className = 'LN' + LN;
}
for(i = 0; i < obj.length; i ++) {
obj[i].onmouseover = function() {
var LN = this.className;
for(var j = 0; j < obj.length; j ++) obj[j].className == LN ? obj[j].style.backgroundColor = color : obj[j].style.backgroundColor = '#FFF';
}
obj[i].onmouseout = function() {
for(var j = 0; j < obj.length; j ++) obj[j].style.backgroundColor = '#FFF';
}
}
}
</script>
li:hover{background:}