이 시나리오에서 스타 등급에 CSS를 쓰는 방법은 무엇입니까?

Question

하프 스타 등급 문제로 고생했습니다. CSS. 나는

스타를 보여주는 내 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 리튬 태그 받고 http://codepen.io/mrk1989/pen/mLeHJ에서 참조를 가지고 나는 모든 CSS 기능을 얻을 내 CSS를 변경하는 방법 위의 링크에 표시되어 있습니다 (예 : 이전 및 현재 별표를 모두 클릭 한 상태에서 모든 별표 이전 및 현재 시작 호버링 효과 표시).

이것은 무언가를하고있는 jsfiddle 링크입니다. https://jsfiddle.net/ae0ypksv/ 완전한 기능이 없습니다.

정말 감사드립니다 .. !! 감사

Answer 1

당신은 ... 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

이 난 그냥 그것을 확인 해결 한 솔루션처럼 하나 <li> 안에 모든 입/라벨을 넣어야 할

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>