问用于5星级系统的CSS
EN

Stack Overflow用户

提问于 2014-05-25 14:11:59

回答 1查看 975关注 0票数 0

我有五颗星星，当鼠标悬停时，鼠标在其中盘旋的星星和这颗星星之前的星星必须改变成不同的颜色。同样的情况必须应用于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>

javascript

jquery

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-05-25 14:34:10

你可以做一件事。为所有的星星创建单独的点击和悬停事件。在任何恒星的点击事件中，它都应该改变那些值低于点击的恒星和恒星本身的颜色。例如，如果单击值为3的星星，则其单击事件必须将星号1、2和3的类更改为“active”。类似地，如果单击值为5的恒星，则必须将恒星的类别1、2、3、4、5更改为“active”。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23856153

复制

相似问题

问用于5星级系统的CSS
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于5星级系统的CSSEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于5星级系统的CSS
EN