* { margin:0; padding:0 } li { list-style:none; float:left; width:50px; height:50px; line-height:50px; text-align:center; background:#666; color:#999 } li:hover { cursor:pointer; background:orange; color:#fff } .active { background:orangered; color:#fff }
主要解决了一个难题:点击选中后,需要移开鼠标才能显示选中后改变的背景色,否则显示的是鼠标移动上去的背景色。解决方案:通过遍历所有li,对所有li覆盖一层透明的背景色和字体颜色,实现覆盖鼠标移动上去的背景色。