我有五颗星，当鼠标悬停时，鼠标悬停的星和这颗星之前的星必须更改为不同的颜色。同样必须应用于 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>
最佳答案
你只能做一件事。为所有星星创建单独的点击和悬停事件。 在任何星星的点击事件中，它应该改变值(value)低于被点击星星和星星本身的星星的颜色。 例如，如果单击值为 3 的星，则它的单击事件必须将星 1,2 和 3 的类更改为“事件”。 同样，如果单击值为 5 的星星，则它必须将星星 1、2、3、4、5 的类别更改为“活跃”。
关于javascript - 5 星评级系统的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23856153/