CSS Star Rating w/ radio buttons - html

Question

I am working on a css star rating system with radios.
However I can't seem to work out what I am doing wrong here...it seems to highlight when I click...but it should be highlighting when I hover.
<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
So this is what I managed to do so far: 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;
}
However there still is a problem...when you select the boxes and they go blue. And you hover back the blue stays while the hovered over part is yellow.
How can I reset the blue once I hover over?

Answer 1

There is something I created long time ago. There is javascript too, for calculating total votes.
Fiddle example
Code snipet :
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 2

https://jsfiddle.net/ypne7t2w/1/
this resets the label color when hovering the fieldset, but doesn't target the label hover:
fieldset:hover > input[type=radio] + label,
fieldset:hover > input[type=radio] + label ~ label {
background-color: green;
}

Answer 3

Here you go. Probably the simplest pure css solution you could come up with.
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/
Hope this helps :)
[update] Added "reset selection on hover".
[update2] Added hover on white space between stars.