Question

我试图用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>

和一些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/

Answer 1

您的HTML不正确。你需要使用类＆＃34; rating＆＃34;来包装你的锚点。然后你需要修复你的CSS来反映变化。我建议学习CSS selectors来了解这里发生了什么。

使用名为＆＃34; star＆＃34;的类将它概括为一般，因此您不仅限于＆＃34; anchors＆＃34;，但您可以使用任何其他内联元素。

这是固定的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

Answer 2

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

DEMO HERE

悬停时的星级评分系统

2 个答案: