悬停时的星级评分系统答案

【问题标题】：Star Rating system on hover悬停时的星级评分系统
【发布时间】：2023-03-31 08:55:01
【问题描述】：

我正在尝试使用 html、css 和 jquery 编写简单的星级评分系统。棘手的部分是我从我的 cms 中获取每颗星，当我给 1 颗星上课时，下一颗星将有相同的课程，所以我不知道如何让它们像示例中那样亮起来。问题是如何让所有的星星在点亮之前像这里一样

http://css-tricks.com/star-ratings/

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

还有一些css：

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

还有 Jsfiddle http://jsfiddle.net/5BbZh/

【问题讨论】：

嗯，你知道，有一种更简单的方法可以用 sprite 做到这一点。只是说。既然纯 CSS 会做得很好，为什么还要乱用 JS！
但那是什么？我知道这将使用 1 个等级和 5 个跨度，我问是因为我不知道该怎么做；）
抱歉，我很忙。我现在在答案中为您发布精灵开始评级代码。我用了一百次，完美无瑕

标签： jquery html css

【解决方案1】：

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

使用名为“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>

这是调整后的 CSS。

.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;
}

这里是jsFiddle

【讨论】：

谢谢你的回答，我有一个奇怪的问题，我的星星从右到左亮，你能告诉我为什么吗？（当然我需要从左到右）
你的 jsFiddle 是什么？

【解决方案2】：

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

DEMO HERE

【讨论】：