js實作簡單的星級選擇器提交效果適用於評論等_javascript技巧

星級選擇器，提交程式碼適用於註解等

沒有用到js庫，就是單獨的js程式碼
 

複製代碼 程式碼如下:

服務

• 
  
  


• default level


• 1


• 2
  
• 3


• 4


• 5

價格

• 
  default level


• 1 li>
  
• 2


• 3


• 4


• 5




品質





• 
  
  


• default level


• 1


• 2 a>


• 3


• 4


• 5

複製程式碼 程式碼如下:

腳本>

複製程式碼

複製程式碼

複製程式碼如下：


body{font-size: 12px;}
ul{padding:0;margin:0;}
/*star.css*/
.star_ rating {list -style:none;margin:-1px 0 0 -1px;填充：0；寬度：70px；高度：12px；位置：親屬；背景：url( rating_stars.gif) 0 0 重複-x;溢出：隱藏；字體大小：0;}
.star_Rating li{padding:0;margin:0;float:left;}
.star_Rating li a{display:block;width:14px;height:12px ;文字裝飾:無文字文字縮排:-9000px;z-index:20;位置:絕對;填充:0;邊距:0;}
.star_ rating li a:hover{background:url( rating_stars.gif ) 0 12px;z-索引:2;左:0;}
.star_Rating a.one_star{左:0;}
.star_Rating a.one_star:hover{寬度:14px;}
.star_Rating a.two_stars{左： 14px;}
.star_Rating a.two_stars:hover{寬度:28px;}
.star_Rating a. Three_stars{左:28px;}
.star_Rating a.Three_Stars:hover{ width:42px;}
.star_ rating a.four_stars{left:42px;}
.star_ rating a。 width:56px;}
.star_ 評級a. Five_stars{left:56px;}
.star_Rating a. Five_stars:hover{寬度:70px;}

.star_Rating li.current_Rating{background:url(Rating_stars.gif) 0 24px;position:absolute;height:12px;display:block;text-indent :-9000pxz; index:1;left:0;} /*結束star.css*/ #star_level{margin:0 0 20px 20px;} #star_level p{margin:20px 0 5px 0;}