CSS为5星级评分系统

我有五颗星，当鼠标悬停在鼠标悬停的星星和该星星之前的星星必须改变为不同的颜色。 onclick事件也一样。以下是HTML代码。我已经尝试了一些CSS。但我不明白该怎么做？如何获取CSS代码？CSS为5星级评分系统

<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>

来源

2014-05-25 user3671365

如果您计划使用图像。尝试使用图像精灵。 http://css-tricks.com/css-sprites-with-inline-images/ – Blunderfest

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

来源

2014-05-25 14:34:10

CSS为5星级评分系统

回答

相关问题