Question

我有五颗星，当鼠标悬停在鼠标悬停的恒星上时，此恒星前的恒星必须改为不同的颜色。同样必须应用于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>

Answer 1

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

五星评级系统的CSS

1 个答案: