說明：
本方法采用了Jquery庫，暫時檢測兼容IE8版本。本示例的2種顏色的星星都是放入了一張png圖片當中，當然還有其他的一些實現思路。本示例展示的情況是當前頁面只有一個星級評價的情況。
思路：
通過對星級顯示元素的，mouseenter,mouseout,click 三個事件的監聽，從而星星顯示的個數。其中我用了2個變量（temp_value,choice_value）來存放當前選定星級的值和當前臨時的星級值；
- temp_value : 臨時的星級值；
- choice_value : 選擇的星級值；
- mouseenter : 鼠標移入，獲取當前所在的星星級別賦予temp_value，調整當前星星的圖片顏色；
- mouseout : 鼠標移除，通過對比choice_value值，重新調整星星圖片顏色；
- click : 鼠標單擊后，獲取當前的星級值，賦值給choice_value;（注意在click前已經進行過mouseenter事件了，click后進行了mouseout事件了）
- 當完成選定值后，在需要提交評價值的時候，可以通過JS去獲取變量choice_value的值；
HTML結構代碼：
<h1>評價：</h1>
<ul id="star">
<li title="很差" id="star1" star="1"></li>
<li title="差" id="star2" star="2"></li>
<li title="一般" id="star3" star="3"></li>
<li title="好" id="star4" star="4"></li>
<li title="很好" id="star5" star="5"></li>
</ul>
注：如果頁面中不止一個星級評價，也就是出現多行的情況，這個時候只需要對Dom中li的id進行一些改造，加上動態的下標，從而區分不同的元素。另外有個點就是，我把選定的星級值放入的是JS變量中去了，多個評價值的情況下，建議可以在Dom中加上隱藏表單域去存放選定的當前星級值。
JS實現代碼：
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"> $(document).ready(function() { var _temp_value = 0,//鼠標hover時的等級value
choiceValue = 0;//默認選定的等級值為1
//鼠標移入的時候
$("#star li").mouseenter(function() { //獲取當前的星級
_temp_value = new Number($(this).attr("star")); showStar(); //鼠標移入的時候
}).mouseout(function(){ hideStar(); //鼠標移入的時候
}).click(function(){ //單擊時，設定當前的選定值
choiceValue = _temp_value;
hideSatr(); }); //星級顯示
function showStar() { for (var i = 1 ; i < _temp_value+1; ++i) { $("#star"+i).addClass("choice"); } } function hideStar() { for (var i = 5 ; i > choiceValue; --i) { $("#star"+i).removeClass("choice"); } } }); </script>
如有問題，請聯系我！這里是Demo地址：http://xiaoweijs.duapp.com/demo/star-level/index.html