title: disable user hover and click for CSS rating
body: <p>I have the below rating CSS code but I want to disable any change for a pre-loaded stars.
  anybody have any ideas how to disable mouse hover over and click?. thanks.<br>
  ..................................</p>
  
  <pre><code>  &lt;style&gt;
          /****** Rating Starts *****/
          @import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
  
          fieldset, label { margin: 0; padding: 0; }
          body{ margin: 20px; }
          h1 { font-size: 1.5em; margin: 10px; }
  
          .rating { 
              border: none;
            //  float: left;
              float: right;
              //position: absolute;
          }
  
          .rating &gt; input { display: none; } 
  
  
          .rating &gt; label:before { 
              margin: 5px;
              font-size: 1.25em;
              font-family: FontAwesome;
          //    display: inline-block;
              content: "\f005";
          }
  
          .rating &gt; .half:before { 
              content: "\f089";
              position: absolute;
          }
  
          .rating &gt; label { 
              color: #ddd; 
              float: right; 
              //position: absolute;
          }
  
  
          .rating &gt; input:checked ~ label, 
          .rating:not(:checked) &gt; label:hover,  
          .rating:not(:checked) &gt; label:hover ~ label { color: #FFD700;  }
  
          .rating &gt; input:checked + label:hover, 
          .rating &gt; input:checked ~ label:hover,
          .rating &gt; label:hover ~ input:checked ~ label, 
          .rating &gt; input:checked ~ label:hover ~ label { color: #FFED85;  }     
  
  
      &lt;/style&gt;
  </code></pre>