Question

我试图在http://fortawesome.github.io/Font-Awesome/examples/

改变星级评分中前两颗星的颜色

我已经为第一个和第一个分配了一个班级。第二个跨度，但它无法正常工作

我的HTML是

<span class="rating">
<span class="star filled"></span>
<span class="star filled"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</span>

我的css是

.rating {
       unicode-bidi:bidi-override;
       direction:rtl;
       font-size:30px;
}
.rating span.star {
      font-family:FontAwesome;
      font-weight:normal;
      font-style:normal;
      display:inline-block;
}
.rating span.star:hover {
     cursor:pointer;
}
.rating span.star:before {
     content:"\f006";
     padding-right:5px;
     color:#999999;
}
.rating span.star:hover:before, .rating span.star:hover~span.star:before {
     content:"\f005";
     color:#e3cf7a;
}


.filled{ color:#e3cf7a; }

JSFIDDLE http://jsfiddle.net/code_snips/ttyYD/

Answer 1

.filled不够具体，请使用span.star.filled
此外，图标实际上是通过:before设置的，因此请使用span.star.filled:before{ color:#e3cf7a; }
如果您希望填充星标，请同时添加content:"\f005";。

但这可能仍然不是你想要的;您可能没有注意到，但.rating类会更改文字方向（unicode-bidi:bidi-override; direction:rtl;）。

因此，您需要将filled类应用于最后两个span标记。

Answer 2

试一下这个的 Jsfiddle 脚本：

$('.rating span.star').click(function(){ var total=$(this).parent().children().length; var clickedIndex=$(this).index(); $('.rating span.star').removeClass('filled'); for(var i=clickedIndex;i<total;i++){ $('.rating span.star').eq(i).addClass('filled'); } });

Answer 3




.rating{unicode-bidi:bidi-override;direction:rtl;font-size:10px;}
.rating span.star{font-family:FontAwesome;font-weight:normal;font-style:normal;display:inline-block}
.rating span.star:hover{cursor:pointer}
.rating span.star:before{content:"\f006";padding-right:5px;color:#999}
.rating span.star:hover:before,.rating span.star:hover~span.star:before{content:"\f005";color:#e3cf7a}
.rating span.star.filled {}
.rating span.star.filled:before{content:"\f005";color:#e3cf7a; }

   <span class="rating" style="font-size:13px;"><span class="star"></span><span class="star"></span><span class="star filled"></span><spanclass="star filled"></span><span class="star filled"></span></span>

如何填写前两个星级的字体真棒星级？

3 个答案: