这篇文章主要为大家详细介绍了JavaScript实现商品评价五星好评，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现商品评价五星好评的具体代码，供大家参考，具体内容如下
一.效果展示
二.代码实现
1.html代码
好评
2.css代码
body{ padding: 200px 600px; } .nostar{ width: 80px; height: 16px; background: url(../img/star-matrix.gif) no-repeat; position: relative; } .nostar li { width: 16px; height: 16px; float: left; } .nostar li a{ display: inline-block; width: 16px; height: 16px; position: absolute; /* text-indent: -999px; */ /* 层级关系*/ z-index: 10; } .nostar li a:hover{ /* 将a的大小变化 width 80 */ left: 0px; width: 80px; background: url(../img/star-matrix.gif) no-repeat; z-index: 5; } .onestar{background-position: 0 -16px;} .twostar{background-position: 0 -32px;} .threestar{background-position: 0 -48px;} .fourstar{background-position: 0 -64px;} .fivestar{background-position: 0 -80px;} .nostar li.onestar a:hover{ background-position: 0 -96px ;} .nostar li.twostar a:hover{ background-position: 0 -112px ;} .nostar li.threestar a:hover{ background-position: 0 -128px ;} .nostar li.fourstar a:hover{ background-position: 0 -144px ;} .nostar li.fivestar a:hover{ background-position: 0 -160px ;}
3.代码下载
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
以上就是JavaScript实现商品评价五星好评的详细内容，更多请关注本站其它相关文章！
