CSS for 5 Star Rating System

Question

I have five stars, when mouse hover the star in which the mouse is hover and the stars before this star must be changed to different color. The same must be applied to the onclick event. Below is the HTML code. I have tried some css for it. But i don't understand how to do it? How to get the CSS code?

    <script type="text/javascript">
    $(document).ready(function(){
$("#images img").click(function(){
    $(this).addClass('active');
    var va = $(this).attr("name");
    $("#result_value").text(va);
});
$("#images img").mouseover(function(){
    });
 });

  $(document).on('click','#images img',function(e) {
  var va = $(this).attr("name");
   $.ajax({
     data:' va='+va,
     type: "post",
     url: "insertmail.php",
     success: function(va){
          alert("Data Save: " + va);
     }
     });

   });
   </script>
  <style>
    .clr:hover{
     background-color:#FFD700;
     }

    .active{
   background-color:#FFD700;
      }
    </style>
   </head>

 <body>
  <div class="images" id="images">
   <form name="imagediv" id="imagediv" method="post">
   <img src="star1.png" class="one clr" alt="Number 1" name="1" width="42" height="42">
   <img src="star2.png" class="two clr" alt="Number 1" name="2" width="42" height="42">
   <img src="star3.png" class="three clr" alt="Number 1" name="3" width="42" height="42">
    <img src="star4.png" class="four clr" alt="Number 1" name="4" width="42" height="42">
   <img src="star5.png" class="five clr" alt="Number 1" name="5" width="42" height="42">

    </form>
 </div>
  <div class="result_value" id="result_value" ></div>
   </body>

Answer 1

You can do one thing. Create separate click and hover events for all the stars. On click event of any star, it should change the color of the stars having lower value than that of clicked star and the star itself. For example, if the star with value 3 is clicked, then it's click event must change the class of star 1,2 and 3 to 'active'. Similarly, if star with value 5 is clicked, then it must change the class of stars 1,2,3,4,5 to 'active'.

CSS for 5 Star Rating System

Question

1 answers

solution1
0 ACCPTED 2014-05-25 14:34:10

CSS for 5 Star Rating System

Question

1 answers

solution1 0 ACCPTED 2014-05-25 14:34:10

solution1
0 ACCPTED 2014-05-25 14:34:10