title: Star-rating with css
body: <p>so I have these radio buttons that form a star-rating component in reactjs, when I hover over the stars they paint in yellow but when I click in one of them and hover out of the stars the color doesn't stay and the gray color come back in all of them. </p>
  
  <p>Here is the js file:</p>
  
  <pre><code>    render(){
      return (
        &lt;div className="star-rating"&gt;
          &lt;input id="star-5" type="radio" name="rating" value="star-5"&gt;&lt;/input&gt;
          &lt;label for="star-5" title="5 stars"&gt;
              &lt;i className="active fa fa-star" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/label&gt;
          &lt;input id="star-4" type="radio" name="rating" value="star-4"&gt;&lt;/input&gt;
          &lt;label for="star-4" title="4 stars"&gt;
              &lt;i className="active fa fa-star" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/label&gt;
          &lt;input id="star-3" type="radio" name="rating" value="star-3"&gt;&lt;/input&gt;
          &lt;label for="star-3" title="3 stars"&gt;
              &lt;i className="active fa fa-star" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/label&gt;
          &lt;input id="star-2" type="radio" name="rating" value="star-2"&gt;&lt;/input&gt;
          &lt;label for="star-2" title="2 stars"&gt;
              &lt;i className="active fa fa-star" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/label&gt;
          &lt;input id="star-1" type="radio" name="rating" value="star-1"&gt;&lt;/input&gt;
          &lt;label for="star-1" title="1 star"&gt;
              &lt;i className="active fa fa-star" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/label&gt;
        &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>and the css:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.star-rating {
      direction: rtl;
      display: inline-block;
      padding: 20px
  }
  
  .star-rating input[type=radio] {
      display: none
  }
  
  .star-rating label {
      color: #bbb;
      font-size: 50px;
      padding: 0;
      cursor: pointer;
  }
  
  .star-rating label:hover,
  .star-rating label:hover ~ label,
  .star-rating input[type=radio]:checked ~ label {
      color: #f2b600
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help?</p>