Jquery 悬停式星级评定系统

我正在尝试用html、css和jquery编写简单的星级评定系统。棘手的是，我要从我的cms中得到每一颗星，当我给一颗星上课时，下一颗星会有相同的课，所以我不知道如何让它们像示例中那样亮起来。 问题是如何让所有的星星都像这里一样亮起来

我的html代码：

<a class="rating" href="javascript:return false" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
<a class="rating" href="javascript:return false" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
<a class="rating" href="javascript:return false" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
<a class="rating" href="javascript:return false" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
<a class="rating" href="javascript:return false" onclick="star(1,6206,5,1,1431)"><span>★</span></a>

和JSFIDLE

---

您的HTML不正确。你需要用一个带有“rating”类的div来包装你的锚。然后，您需要修复css以反映更改。我建议大家了解一下这里发生了什么

使用名为“star”的类将对其进行泛化，因此您不仅限于使用“锚”，还可以使用任何其他内联元素

以下是固定的HTML：

<div class="rating">
  <a class="star" href="#" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
  <a class="star" href="#" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
  <a class="star" href="#" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
  <a class="star" href="#" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
  <a class="star" href="#" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
</div>

---

这是一个

您必须调整精灵图像，使其适合容器并且没有闪烁。但除此之外，一切都结束了。我使用的星星也是超链接。显然，您希望在根文件中实际使用图像

---

嗯，你知道，用雪碧做这件事有一个更简单的方法。只是说说而已。为什么要乱搞JS，而纯CSS会做得很好！但那是什么方式？我知道这将与1级评级和5跨内工作，我问，因为我不知道如何这样做；）对不起，我很忙。我现在在回复中为你发布一个精灵开始等级代码。我已经用了一百次了，这是完美的答案，我有一个奇怪的问题，我的星星从右到左亮着，你能告诉我为什么吗？（当然我需要从左到右）你的JSFIDLE是什么？

<div class="rating">
  <a class="star" href="#" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
  <a class="star" href="#" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
  <a class="star" href="#" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
  <a class="star" href="#" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
  <a class="star" href="#" onclick="star(1,6206,5,1,1431)"><span>★</span></a>
</div>

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
}
.rating > .star {
  display: inline-block;
  position: relative;
  width: 1.1em;
  color:green;
}
.rating > .star:hover,
.rating > .star:hover ~ .star {
  color: transparent;
}
.rating > .star:hover:before,
.rating > .star:hover ~ .star:before {
   content: "\2605";
   position: absolute;
   left: 0; 
   color: gold;
}