height: 26px; font-family: "Microsoft YaHei", SimHei, arial; wCSSGAMES:纯CSS实现五星评价效果,感兴趣的小伙伴们可以来看一下。
上代码:
<style type =“text / css”> 。容器{ 宽度:250px; height:50px; 位置:亲戚; 边框:1px纯红色; } UL { 保证金:0; 填充:0; 位置:绝对 list-style:none; 宽度:100%; 身高:100%; 溢出:隐藏; } 李{ z-index:1; 宽度:20%; 身高:100%; float:left; 背景:#faf; border-radius:50%; / * box-shadow:2px red inset; * / } 李:悬停+跨度{ 显示:块; z-index:99; 宽度:500%; 身高:100%; float:left; 背景:#afa; } .backer { 位置:绝对 宽度:100%; 身高:100%; } .backer li { 背景:#999; } </样式>
<p class =“container”> <p class =“backer”> <UL> <li> </ li> <li> </ li> <li> </ li> <li> </ li> <li> </ li> </ UL> </ DIV> <UL> <li class =“li1”> </ li> <span> </ span> <li class =“li2”> </ li> <span> </ span> <li class =“li3”> </ li> <span> </ span> <li class =“li4”> </ li> <span> </ span> <li class =“li5”> </ li> <span> </ span> </ UL> </ DIV> <p>另一个p </ p>
感觉还不错吧。