title: CSS Star Rating w/ radio buttons
body: <p>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.</p>
  
  <pre><code>&lt;fieldset&gt;    
  &lt;input type="radio" id="star-5" name="rating-01" value="5"&gt;&lt;label for="star-5"&gt;&lt;/label&gt;
      &lt;input type="radio" id="star-4" name="rating-01" value="4"&gt;&lt;label for="star-4"&gt;&lt;/label&gt;
      &lt;input type="radio" id="star-3" name="rating-01" value="3"&gt;&lt;label for="star-3"&gt;&lt;/label&gt;
      &lt;input type="radio" id="star-2" name="rating-01" value="2"&gt;&lt;label for="star-2"&gt;&lt;/label&gt;
      &lt;input type="radio" id="star-1" name="rating-01" value="1"&gt;&lt;label for="star-1"&gt;&lt;/label&gt;
  &lt;/fieldset&gt;
  
  
  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;
  }
  </code></pre>
  
  <hr>
  
  <p><br>
  <strong>UPDATE</strong></p>
  
  <hr>
  
  <p>So this is what I managed to do so far: <strong><a href="https://jsfiddle.net/ypne7t2w/" rel="nofollow">JSFiddle</a></strong>;</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>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 &gt; input[type=radio]:checked ~ label {
      background-color: blue;
  }
  
  fieldset:hover &gt; input[type=radio] + label:hover,
  fieldset:hover &gt; input[type=radio] + label:hover ~ label {
      background-color: gold;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>How can I reset the blue once I hover over?</p>