Wie schreibe ich CSS für Star Rating in diesem Szenario?

Question

Stuck in halben Sterne Problem CSS. Ich nehme eine Referenz von http://codepen.io/mrk1989/pen/mLeHJ

meine HTML-Struktur für Star zeigt, wie ist, dass

<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> 

und in meinem Fall Sterne kommen unter Tag ul li und wie kann ich meine CSS ändern alle CSS-Funktionalität zu erhalten, das ist Wie oben beschrieben (wie beim Klick ist der vorherige und der aktuelle Stern EIN und beim Schweben alle vorherigen und aktuellen Startshow-Effekte).

Dies ist jsfiddle Link, in dem ich etwas mache https://jsfiddle.net/ae0ypksv/ nicht voll funktionsfähig.

Hilfe wird wirklich geschätzt .. !! es überprüfen es dank

Answer 1

Sie haben alle 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

gelöst haben ...

dieses i die Lösung innerhalb eines <li> wie Sie Ihre Eingabe/label setzen nur

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>