如何在這種情況下爲星級寫CSS？

Question

陷入半星評級問題CSS。我從http://codepen.io/mrk1989/pen/mLeHJ

我對明星的表現HTML結構就是這樣

<ul class="rateChange"> 
    <li> 
    <input type="radio" id="rating10" name="rating" value="10" /> 
    <label for="rating10" title="5 stars"></label> 
    <input type="radio" id="rating9" name="rating" value="9" /> 
    <label class="half" for="rating9" title="4 1/2 stars"></label> 
    </li> 
    <li> 
    <input type="radio" id="rating8" name="rating" value="8" /> 
    <label for="rating8" title="4 stars"></label> 
    <input type="radio" id="rating7" name="rating" value="7" /> 
    <label class="half" for="rating7" title="3 1/2 stars"></label> 
    </li> 
    <li> 
    <input type="radio" id="rating6" name="rating" value="6" /> 
    <label for="rating6" title="3 stars"></label> 
    <input type="radio" id="rating5" name="rating" value="5" /> 
    <label class="half" for="rating5" title="2 1/2 stars"></label> 
    </li> 
    <li> 
    <input type="radio" id="rating4" name="rating" value="4" /> 
    <label for="rating4" title="2 stars"></label> 
    <input type="radio" id="rating3" name="rating" value="3" /> 
    <label class="half" for="rating3" title="1 1/2 stars"></label> 
    </li> 
    <li> 
    <input type="radio" id="rating2" name="rating" value="2" /> 
    <label for="rating2" title="1 star"></label> 
    <input type="radio" id="rating1" name="rating" value="1" /> 
    <label class="half" for="rating1" title="1/2 star"></label> 
    </li> 
</ul> 

，並在我的情況下，星星就在UL李標籤的參考，我怎樣才能改變我的CSS讓所有的CSS功能，這是在上面的鏈接中給出（如點擊所有前面的和當前的星形是ON和懸停所有星形的前一個和當前的開始顯示懸停效果）。

這是jsfiddle鏈接，我正在做些什麼https://jsfiddle.net/ae0ypksv/ 沒有達到完整的功能。

幫助真的很感激.. !!感謝

Answer 1

你必須把所有的輸入/標籤一個<li>裏面像this

<h1>Half Star Rating Change Senirow</h1> 

<ul class="rateChange"> 
    <li> 
    <input type="radio" id="rating10" name="rating" value="10" /> 
    <label for="rating10" title="5 stars"></label> 
    <input type="radio" id="rating9" name="rating" value="9" /> 
    <label class="half" for="rating9" title="4 1/2 stars"></label> 

    <input type="radio" id="rating8" name="rating" value="8" /> 
    <label for="rating8" title="4 stars"></label> 
    <input type="radio" id="rating7" name="rating" value="7" /> 
    <label class="half" for="rating7" title="3 1/2 stars"></label> 

    <input type="radio" id="rating6" name="rating" value="6" /> 
    <label for="rating6" title="3 stars"></label> 
    <input type="radio" id="rating5" name="rating" value="5" /> 
    <label class="half" for="rating5" title="2 1/2 stars"></label> 

    <input type="radio" id="rating4" name="rating" value="4" /> 
    <label for="rating4" title="2 stars"></label> 
    <input type="radio" id="rating3" name="rating" value="3" /> 
    <label class="half" for="rating3" title="1 1/2 stars"></label> 

    <input type="radio" id="rating2" name="rating" value="2" /> 
    <label for="rating2" title="1 star"></label> 
    <input type="radio" id="rating1" name="rating" value="1" /> 
    <label class="half" for="rating1" title="1/2 star"></label> 
    </li> 
</ul> 

Answer 2

這

的解決方案，我已經解決了它只是檢查...

body { 
 
    margin: 5%; 
 
    text-align: center; 
 
    background: aliceblue; 
 
    color: darkred; 
 
} 
 
h1 { 
 
    font-size: 2em; 
 
    margin-bottom: .5rem; 
 
} 
 

 
/* Ratings widget */ 
 
.rate { 
 
    display: inline-block; 
 
    border: 0; 
 
} 
 
/* Hide radio */ 
 
.rate > input { 
 
    display: none; 
 
} 
 
/* Order correctly by floating highest to the right */ 
 
.rate > label { 
 
    float: right; 
 
} 
 
/* The star of the show */ 
 
.rate > label:before { 
 
    display: inline-block; 
 
    font-size: 50px; 
 
    padding: .3rem .2rem; 
 
    margin: 0; 
 
    cursor: pointer; 
 
    font-family: FontAwesome; 
 
    content: '\2605'; /* full star */ 
 
} 
 

 
/* Zero stars rating */ 
 
.rate > label:last-child:before { 
 
    content: '\2605' ; /* empty star outline */ 
 
} 
 

 
input:checked ~ label, /* color current and previous stars on checked */ 
 
label:hover, label:hover ~ label { color: #73B100; } /* color previous stars on hover */ 
 

 
/* Hover highlights */ 
 
input:checked + label:hover, input:checked ~ label:hover, /* highlight current and previous stars */ 
 
input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */ 
 
label:hover ~ input:checked ~ label /* highlight previous selected stars */ { color: #A6E72D; }

<html> 
 
<head> 
 
<title>Rating</title> 
 
<link type="text/css" href="style.css" rel="stylesheet"> 
 

 
</head> 
 
<body> 
 
<h1>Star Rating By Md.Sabbirul Islam</h1> 
 

 

 
<fieldset class="rate"> 
 
    <input type="radio" id="rating10" name="rating" value="10" /><label for="rating10" title="5 stars"></label> 
 
    
 
    <input type="radio" id="rating8" name="rating" value="8" /><label for="rating8" title="4 stars"></label> 
 

 
    <input type="radio" id="rating6" name="rating" value="6" /><label for="rating6" title="3 stars"></label> 
 

 
    <input type="radio" id="rating4" name="rating" value="4" /><label for="rating4" title="2 stars"></label> 
 

 
    <input type="radio" id="rating2" name="rating" value="2" /><label for="rating2" title="1 star"></label> 
 

 
    <input type="radio" id="rating0" name="rating" value="0" /><label for="rating0" title="No star"></label> 
 
</fieldset> 
 
</body> 
 
</html>