CSS五星评级系统，星距问题

我创建了一个5星级的评级系统。我的css设置为显示固定在屏幕上的灰色背景星。当鼠标悬停在蓝色星星上时，会出现两颗金色星星，尽管这些星星居中并向外延伸，例如，当我选择1颗星星时，中间的星星会变成金色，而不是最左边的灰色星星。同样，如果我选择2颗星星，则在第二颗和第四颗灰色星星之间会出现两颗金色星星，灰色星星在背景中仍然可见。这看起来很不整洁

有人能告诉我如何改变我的代码，把实际的星星选为黄金吗

我的星星图片是stars.png，在一张图片中分别有一颗灰色、蓝色和金色的星星

我对css的知识有限。我尝试过一个接一个地更改css的多个组件，比如width或px，但都没用

这是我的css

form .stars {
  background: url("stars.png") repeat-x 0 0;
  width: 150px;
  margin: 0 auto;
}

form .stars input[type="radio"] {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
}
form .stars input[type="radio"].star-5:checked ~ span {
  width: 100%;
}
form .stars input[type="radio"].star-4:checked ~ span {
  width: 80%;
}
form .stars input[type="radio"].star-3:checked ~ span {
  width: 60%;
}
form .stars input[type="radio"].star-2:checked ~ span {
  width: 40%;
}
form .stars input[type="radio"].star-1:checked ~ span {
  width: 20%;
}
form .stars label {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0!important;
  padding: 0!important;
  text-indent: -999em;
  float: left;
  position: relative;
  z-index: 10;
  background: transparent!important;
  cursor: pointer;
}
form .stars label:hover ~ span {
  background-position: 0 -30px;
}
form .stars label.star-5:hover ~ span {
  width: 100% !important;
}
form .stars label.star-4:hover ~ span {
  width: 80% !important;
}
form .stars label.star-3:hover ~ span {
  width: 60% !important;
}
form .stars label.star-2:hover ~ span {
  width: 40% !important;
}
form .stars label.star-1:hover ~ span {
  width: 20% !important;
}
form .stars span {
  display: block;
  width: 0;
  position: relative;
  top: 0;
  left: 0;
  height: 30px;
  background: url("stars.png") repeat-x 0 -60px;
  -webkit-transition: -webkit-width 0.5s;
  -moz-transition: -moz-width 0.5s;
  -ms-transition: -ms-width 0.5s;
  -o-transition: -o-width 0.5s;
  transition: width 0.5s;
}

---

有一个更紧凑的解决方案，以5星级的评级代码。它涉及使用以下方法反转相邻选择器的工作方式：

unicode-bidi: bidi-override;
direction: rtl;

此演示使用了一种简单的字体，它比传统的

或sprite更快，并且作为一种字体，它受

颜色

、

字体大小

、

字体样式

等的约束

请阅读本文了解详细信息

片段

星级
.费率{
unicode-bidi:bidi覆盖；
方向：rtl；
文本对齐：居中；
}
.速率>跨度{
显示：内联块；
位置：相对位置；
宽度：1.1米；
}
.速率>跨度：悬停，
.rate>span:悬停~span{
颜色：透明；
}
.速率>范围：悬停：之前，
.rate>span:hover~span:before{
内容：“\2605”；
位置：绝对位置；
左：0；
颜色：金色；
}
☆☆☆☆☆

嗯，你能删除行号吗？嗨@JacobGray。我已按要求删除了行号。顺便说一句，它们不在我的实际代码中，本质上，它可以归结为更改

背景位置

属性。移动背景图像，以便显示所需恒星的“状态”。我无法提供准确的代码，因为我不知道你的星精灵是什么样子。下面是一个非常可靠的示例，它使用

input:checked~label:before

将样式应用于当前选中的收音机和任何“较低”值的收音机。这是同一个例子，但我对它进行了修改，使之稍微简化了一点。Hi@zer00ne尝试了这个，但是没有星星显示，因为我页面的其余部分是用css设置的。我只是得到了一些奇怪的符号，星星应该出现在上面，以澄清星星在悬停时确实出现了，但是当假设的星星在正常状态下出现时，上面会出现一个带“~”符号的“a”你使用的是我提供的确切代码吗？或者，您是否将代码的重要部分整合到页面中？如果是后者，那么我怀疑您的页面需要此

中的

我确实使用了您建议的确切代码，我的页面上有其他代码来计算平均评分等，因此我怀疑它与此相冲突，或者因为我使用的是Internet Explorer浏览器，所以您的顶部有

和

和

吗。您的页面未正确显示unicode。