具有單選按鈕的CSS星級

Question

我正在使用無線電的css星級評分系統。 但是我似乎無法弄清楚我在這裏做錯了什麼......它似乎突出顯示了當我點擊時......但它應該突出顯示當我懸停時。

<fieldset>  
<input type="radio" id="star-5" name="rating-01" value="5"><label for="star-5"></label> 
    <input type="radio" id="star-4" name="rating-01" value="4"><label for="star-4"></label> 
    <input type="radio" id="star-3" name="rating-01" value="3"><label for="star-3"></label> 
    <input type="radio" id="star-2" name="rating-01" value="2"><label for="star-2"></label> 
    <input type="radio" id="star-1" name="rating-01" value="1"><label for="star-1"></label> 
</fieldset> 


input[type=radio] { display: none; visibility: collapse; } 

input[type=radio] + label { 
    position: relative; float: right; clear: none; display: block; 
    width: 18.4%; height: 120px; margin: 0 1% 0 1%; padding: 0; 
    outline: 0; cursor: pointer; 

    background-color: green; 
} 
input[type=radio]#star-1 + label { margin: 0 1% 0 0; } input[type=radio]#star-5 + label { margin: 0 0 0 1%; } 

input[type=radio]:hover + label, 
    input[type=radio]:hover + label ~ input[type=radio] + label { 
     background-color: red; 
} 

---

UPDATE

---

原來這就是我設法到目前爲止做的：JSFiddle;

CSS：

input[type=radio] { display: none; visibility: collapse; } 

input[type=radio] + label { 
    position: relative; float: right; clear: none; display: block; 
    width: 18.4%; height: 120px; margin: 0 1% 0 1%; padding: 0; 
    outline: 0; cursor: pointer; background-color: green; 
} 
input[type=radio]#star-1 + label { margin: 0 1% 0 0; } input[type=radio]#star-5 + label { margin: 0 0 0 1%; } 

fieldset > input[type=radio]:checked ~ label { 
    background-color: blue; 
} 

fieldset:hover > input[type=radio] + label:hover, 
fieldset:hover > input[type=radio] + label:hover ~ label { 
    background-color: gold; 
} 

但是仍然有一個問題...當您選擇框和他們去藍色。而你將鼠標懸停在藍色的支架上，而懸停的部分則是黃色的。

將鼠標懸停後，如何重置藍色？

Answer 1

在這裏，你去。可能是您可以想到的最簡單的純CSS解決方案。

HTML

<div class="stars"> 
    <input type="radio" id="rate-5" name="rating-1"> 
    <label for="rate-5"></label> 
    <input type="radio" id="rate-4" name="rating-1"> 
    <label for="rate-4"></label> 
    <input type="radio" id="rate-3" name="rating-1"> 
    <label for="rate-3"></label> 
    <input type="radio" id="rate-2" name="rating-1"> 
    <label for="rate-2"></label> 
    <input type="radio" id="rate-1" name="rating-1"> 
    <label for="rate-1"></label> 
</div> 

CSS

.stars { 
    float: left; 
    overflow: hidden; 
    width: 100%; 
} 
.stars input[type=radio]:checked ~ label:after { 
    background: blue; 
} 
.stars input[type=radio] { 
    display: none; 
} 
.stars input[type=radio]:first-child + label { 
    padding-right: 0; 
} 
.stars:hover input[type=radio]:checked ~ label:after, 
.stars label:after { 
    background: green; 
} 
.stars label { 
    box-sizing: border-box; 
    width: 20%; 
    padding-right: 2%; 
    height: 120px; 
    float: right; 
    cursor: pointer; 
} 
.stars label:after { 
    display: block; 
    content: ""; 
    height: 120px; 
    width: 100%; 
    float: right; 
    transition: all 0.25s; 
    background: green; 
} 
.stars label:hover:after, 
.stars label:hover ~ label:after { 
    background: gold !important; 
} 

https://jsfiddle.net/rsyfchfo/

希望這有助於:)

[更新]增加了 「重置懸停選擇」。

[更新2]在星星之間的空白處添加懸停。

Answer 2

很久以前我創造了一些東西。計算總票數也有javascript。

Fiddle example

一小段代碼片段：

function showme(id) { 
 
    document.getElementById('result').innerHTML = 'My vote : '+id.value; 
 
    var r = document.getElementById('res').value.split(','); 
 
    var s=''; 
 
    for(var i=0;i<5;i++) { 
 
     if(id.value==(i+1).toString()) { 
 
     var x = parseInt(r[i])+1; 
 
     r[i]=x.toString(); 
 
     } 
 
     if(i==4) {s+=r[i];} else {s+=r[i]+',';} 
 
    } 
 
    document.getElementById('res').value=s; 
 
    calc(); 
 
    } 
 
    function calc() { 
 
    var x=document.getElementById('res').value.split(','); 
 
    var r=0; 
 
    var t=0; 
 
    for(var i=0;i<5;i++) { 
 
     t+=parseInt(x[i]); 
 
     r+=(parseInt(x[i])*(i+1)); 
 
    } 
 
    var s=parseInt((r/t)*20); 
 
    document.getElementById('bar').style.width=s.toString()+'%'; 
 
    document.getElementById('sta').innerHTML=s.toString()+'%'; 
 
    }

#divRateCnt { 
 
    width: 130px; 
 
    position: relative; 
 
} 
 

 
#divRareCnt, #divStarsCnt{ 
 
    height: 26px; 
 
    background: url(http://s4.postimg.org/wi683zp2h/stars.png) 0 0px repeat-x; 
 
} 
 

 
#divRateCnt input{ 
 
    display: none; 
 
} 
 

 
#divRateCnt label{ 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 26px; 
 
    width: 130px; 
 
    cursor: pointer; 
 
} 
 
#divRateCnt:hover label{ 
 
    display: block; 
 
} 
 
#divRateCnt label:hover{ 
 
    background: url(http://s4.postimg.org/wi683zp2h/stars.png) 0 -52px repeat-x; 
 
} 
 

 
#divRateCnt label + input + label{width: 104px;} 
 
#divRateCnt label + input + label + input + label{width: 78px;} 
 
#divRateCnt label + input + label + input + label + input + label{width: 52px;} 
 
#divRateCnt label + input + label + input + label + input + label + input + label{width: 26px;} 
 

 
#divRateCnt input:checked + label{ 
 
    display: block; 
 
    background: url(http://s4.postimg.org/wi683zp2h/stars.png) 0 -52px repeat-x; 
 
}

<input type="hidden" value="0,0,0,0,0" id="res" /> 
 
<div id="divRateCnt"> 
 
    <div id="divStarsCnt"></div> 
 
    <input type="radio" name="rating" id="star5" value="5" onchange="showme(this);"><label for="star5"></label> 
 
    <input type="radio" name="rating" id="star4" value="4" onchange="showme(this);"><label for="star4"></label> 
 
    <input type="radio" name="rating" id="star3" value="3" onchange="showme(this);"><label for="star3"></label> 
 
    <input type="radio" name="rating" id="star2" value="2" onchange="showme(this);"><label for="star2"></label> 
 
    <input type="radio" name="rating" id="star1" value="1" onchange="showme(this);"><label for="star1"></label> 
 
</div> 
 
<br> 
 
<span id="result"></span> 
 
<br><br> 
 
Total vote(s) :<br> 
 
<div style="width:130px;height:26px;background:url(http://s4.postimg.org/wi683zp2h/stars.png) 0 0 repeat-x;position:relative;"> 
 
    <div id="bar" style="width:130px;height:26px;background:url(http://s4.postimg.org/wi683zp2h/stars.png) 0 -26px repeat-x;position:absolute;top:0;left:0;width:0%;"></div> 
 
</div> 
 
<span id="sta"></span>

Answer 3

https://jsfiddle.net/ypne7t2w/1/

此復位徘徊字段集時，標籤顏色，但不針對標籤懸停：

fieldset:hover > input[type=radio] + label, 
fieldset:hover > input[type=radio] + label ~ label { 
    background-color: green; 
}