用于 5 星评级系统的 CSS答案

【问题标题】：CSS for 5 Star Rating System用于 5 星评级系统的 CSS
【发布时间】：2014-05-25 14:11:59
【问题描述】：

我有五颗星，当鼠标悬停时，鼠标悬停的星和这颗星之前的星星必须更改为不同的颜色。 onclick 事件也必须如此。下面是 HTML 代码。我已经为此尝试了一些CSS。但我不明白该怎么做？如何获取 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>

【问题讨论】：

如果您打算使用图像。尝试使用图像精灵。 css-tricks.com/css-sprites-with-inline-images

标签： javascript jquery html css

【解决方案1】：

你可以做一件事。为所有星星创建单独的单击和悬停事件。在任何星星的点击事件中，它应该改变价值低于点击星星和星星本身的星星的颜色。例如，如果点击了值为 3 的星星，那么它的点击事件必须将星星 1,2 和 3 的类更改为“活动”。同样，如果单击值为 5 的星号，则必须将星号 1,2,3,4,5 的类别更改为“活动”。

【讨论】：