jquery - 悬停时的星级评分系统

Question

我正在尝试使用 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/

Answer 1

您的 HTML 不正确。您需要用类为“rating”的 div 包裹 anchor 。然后您需要修复您的 CSS 以反射(reflect)更改。我建议了解 CSS selectors了解这里发生了什么。

使用一个名为“星号”的类会泛化它，因此您不仅限于“ anchor ”，还可以使用任何其他内联元素。

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