5星评级系统的CSS

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. 必须对onclick事件应用相同的操作。 Below is the HTML code. 以下是HTML代码。 I have tried some css for it. 我已经尝试了一些CSS。 But i don't understand how to do it? 但是我不知道该怎么做？ How to get the CSS code? 如何获得CSS代码？

    <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'. 例如，如果单击了值为3的星形，则其click事件必须将星形1,2和3的类别更改为“活动”。 Similarly, if star with value 5 is clicked, then it must change the class of stars 1,2,3,4,5 to 'active'. 同样，如果单击值为5的星形，则必须将1,2,3,4,5的星形类别更改为“活动”。

5星评级系统的CSS

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-05-25 14:34:10

5星评级系统的CSS

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-05-25 14:34:10

解决方案1
0 已采纳 2014-05-25 14:34:10