1 ul { 2                 border: 1px #0094ff solid; 3                 text-align: center; 4                 float: left; 5                 list-style: none; 6                 padding: 0px; 7  8             } 9             li {10                 border: #0094ff 1px solid;11                 width: 30px;12                 height: 30px;13                 line-height: 30px;14                 float: left;15             }

1 <ul id="ult">2             <li>1</li>3             <li>2</li>4             <li>3</li>5             <li>4</li>6             <li>5</li>7         </ul>

 1 <script type="text/javascript"> 2     //取所有li标签元素 3     var liList = document.getElementsByTagName("li"); 4     //定义当前被点击元素的变量 5     var ifClick; 6     //定义当前鼠标所在位置的变量 7     var ifEnter; 8     //为li标签添加鼠标移入移出及点击事件 9     for (var i = 0; i < liList.length; i++) {10         liList[i].xuHao = i;11         liList[i].onmouseenter =function() {12             objHuang(this);13         }14         liList[i].onmouseleave = leave;15         liList[i].onclick = function () {16             if (ifClick != undefined) {17                 if (ifClick == this.xuHao) {18                     objBai();19                     ifClick = undefined;20                 } else {21                     objBai();22                     objHuang(this);23                     ifClick = this.xuHao;24                 }25             } else {26                 ifClick = this.xuHao;27                 objHuang(this);28             }29 30 31         }32     }33 34     //鼠标移出事件35     function leave() {36         if (ifClick!=undefined) {37             if (this.xuHao > ifClick) {38                 for (var i = ifClick; i < liList.length; i++) {39                     if (i + 1 < liList.length) {40                       liList[i+1].style.backgroundColor = "#ffffff";  41                     }                    42                 }43             }44         } else {            45             objBai();46         }47     }48 49     //标签还原白色50     function objBai() {51         for (var i = 0; i < liList.length; i++) {52             liList[i].style.backgroundColor = "#ffffff";53         }54     }55 56     //鼠标移入事件中,从当前标签到最前标签变黄57     function objHuang(litab) {58         litab.style.backgroundColor = "yellow";59         ifEnter = litab.xuHao;60         var previousObj = litab.previousElementSibling;61         do {62             previousObj.style.backgroundColor = "yellow";63             previousObj = previousObj.previousElementSibling;64         } while (previousObj)65     }66 67 68 69 </script>