* {
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覆盖一层透明的背景色和字体颜色,实现覆盖鼠标移动上去的背景色。