如何僅使用css創建評分系統

Question

如何僅使用css創建評分系統。我不想使用javascript/jquery或其他任何東西。我也不想使用image/image sprites。我只需要懸停（鼠標懸停），而不是單擊和純CSS。 這裏是我想要的示例圖像。

Answer 1

的html代碼...

<div class="rate"> 
      <div class="rate-item">☆</div> 
      <div class="rate-item">☆</div> 
      <div class="rate-item">☆</div> 
     </div> 

CSS代碼...

.rate{ 
     color:black; 
     cursor:pointer; 
    } 
    .rate:hover{ 
     color:red; 
    } 
    .rate-item{ 
     float:left; 
     cursor:pointer; 
     margin:0px 15px 0px 15px; 
    } 
    .rate-item:hover ~ .rate-item { 
     color: black; 
    } 

你可以按照這個例子

http://jsfiddle.net/tanvir0604/JqKjL/1/

可以使用fontawsome獲得更好的性能，或只是更改背景圖片屬性，除了我的代碼的顏色屬性。

Answer 2

HTML

<article> 
<div class="star-rating"> 

    <input class="rb0" id="Ans_1" name="numericRating" type="radio" value="0" checked="checked" />      
    <input class="rb1" id="Ans_2" name="numericRating" type="radio" value="1" /> 
    <input class="rb2" id="Ans_3" name="numericRating" type="radio" value="2" /> 
    <input class="rb3" id="Ans_4" name="numericRating" type="radio" value="3" />  
    <input class="rb4" id="Ans_5" name="numericRating" type="radio" value="4" />  
    <input class="rb5" id="Ans_6" name="numericRating" type="radio" value="5" />  
    <input class="rb6" id="Ans_7" name="numericRating" type="radio" value="6" /> 
    <input class="rb7" id="Ans_8" name="numericRating" type="radio" value="7" />  
    <input class="rb8" id="Ans_9" name="numericRating" type="radio" value="8" /> 
    <input class="rb9" id="Ans_10" name="numericRating" type="radio" value="9" /> 
    <input class="rb10" id="Ans_11" name="numericRating" type="radio" value="10" /> 

    <label for="Ans_1" class="star rb0l" onclick=""></label> 
    <label for="Ans_2" class="star rb1l" onclick=""></label> 
    <label for="Ans_3" class="star rb2l" onclick=""></label> 
    <label for="Ans_4" class="star rb3l" onclick=""></label> 
    <label for="Ans_5" class="star rb4l" onclick=""></label> 
    <label for="Ans_6" class="star rb5l" onclick=""></label> 
    <label for="Ans_7" class="star rb6l" onclick=""></label> 
    <label for="Ans_8" class="star rb7l" onclick=""></label> 
    <label for="Ans_9" class="star rb8l" onclick=""></label> 
    <label for="Ans_10" class="star rb9l" onclick=""></label> 
    <label for="Ans_11" class="star rb10l last" onclick=""></label> 

    <label for="Ans_1" class="rb" onclick="">0</label> 
    <label for="Ans_2" class="rb" onclick="">1</label> 
    <label for="Ans_3" class="rb" onclick="">2</label> 
    <label for="Ans_4" class="rb" onclick="">3</label> 
    <label for="Ans_5" class="rb" onclick="">4</label> 
    <label for="Ans_6" class="rb" onclick="">5</label> 
    <label for="Ans_7" class="rb" onclick="">6</label> 
    <label for="Ans_8" class="rb" onclick="">7</label> 
    <label for="Ans_9" class="rb" onclick="">8</label> 
    <label for="Ans_10" class="rb" onclick="">9</label> 
    <label for="Ans_11" class="rb" onclick="">10</label> 

    <div class="rating"></div> 
    <div class="rating-bg"></div> 
</div> <!-- star-rating --> 
</article> 

CSS

article { 
    padding-left: 50px; /* arbitrary, to expose the "zero stars" area half a star to the left of the first star.*/ 
} 

.star-rating { 
    margin: 0 auto; 
    display:inline-block; 
} 
/* radio button stars */ 

/* you can easily stuff the generation of these repetitive chunks of CSS into a server-side language like ASP */ 
.rb0:checked ~ .rating, 
label.rb0l:hover ~ .rating 
{ 
    width: 0px; /* no stars */ 
} 

.rb1:checked ~ .rating, 
label.rb1l:hover ~ .rating 
{ 
    width: 16px; /* half a star */ 
} 

.rb2:checked ~ .rating, 
label.rb2l:hover ~ .rating 
{ 
    width: 32px; /* a star */ 
} 

.rb3:checked ~ .rating, 
label.rb3l:hover ~ .rating 
{ 
    width: 48px; /* 1.5 stars */ 
} 

.rb4:checked ~ .rating, 
label.rb4l:hover ~ .rating 
{ 
    width: 64px; /* 2 stars */ 
} 
.rb5:checked ~ .rating, 
label.rb5l:hover ~ .rating 
{ 
    width: 80px; 
} 
.rb6:checked ~ .rating, 
label.rb6l:hover ~ .rating 
{ 
    width: 96px; 
} 
.rb7:checked ~ .rating, 
label.rb7l:hover ~ .rating 
{ 
    width: 112px; 
} 
.rb8:checked ~ .rating, 
label.rb8l:hover ~ .rating 
{ 
    width: 128px; 
} 
.rb9:checked ~ .rating, 
label.rb9l:hover ~ .rating 
{ 
    width: 144px; 
} 
.rb10:checked ~ .rating, 
label.rb10l:hover ~ .rating 
{ 
    width: 160px; /* 5 stars */ 
} 

.star-rating label.star { 
    width: 16px; /* half star */ 
    left: -16px; /* half star */ 
    padding: 0; 
    height: 40px; /* whole star + 2x padding (4px each for top and bottom) */ 
    position: relative; 
    z-index: 3; 
    float: left; 
} 

.star-rating label.star.last { 
    width: 32px; 
} 

/* hide inputs (RBs and their labels) */ 
.star-rating input[type=radio], 
.star-rating label.rb 
{ 
    display: none; 
} 

/* using icons found at http://www.easyicon.cn/language.en/icondetail/523835/ */ 
.rating { 
    background: url(http://cdn-img.easyicon.cn/png/5238/523834.gif) repeat-x top left; 
    position: relative; 
    z-index: 2; 
    top: 4px; /* 1x padding */ 
    height: 32px; /* whole star */ 
    width:0px; 
} 

.rating-bg { 
    background: url(http://cdn-img.easyicon.cn/png/5238/523835.gif) repeat-x top left; 
    position: relative; 
    z-index: 1; 
    top: -28px; /* 1 whole star - 1x padding */ 
    height: 32px; /* whole star */ 
    width: 160px; 
} 

/* IE8 fallback to radio buttons */ 
.ie8 .star-rating input, 
.ie8 .star-rating label.rb 
{ 
    display: inline-block; 
} 

.ie8 .rating, 
.ie8 .rating-bg, 
.ie8 .star-rating label.star { 
    display: none; 
} 

DEMO