求鼠标经过li行变色HTML code!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://w
求鼠标经过li行变色
- HTML code
<!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行变色
[解决办法]
- HTML code
<script type="text/javascript">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>