4

我正在尝试在http://fortawesome.github.io/Font-Awesome/examples/更改 fontawesome 星级评分中前两颗星的颜色

我已经为第一个和第二个跨度分配了一个类，但它不起作用

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

4

3 回答 3

3


试试这个
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');
                }
            });
于 2014-05-20T06:17:30.003 回答
3
  1. .filled不够具体，使用span.star.filled
  2. 此外，图标实际上是通过 设置样式的:before，所以使用span.star.filled:before{ color:#e3cf7a; }
  3. 如果要填充星号，content:"\f005";也请添加 。

但这可能仍然不是您想要的；您可能没有注意到，但.rating该类更改了文本方向 ( unicode-bidi:bidi-override; direction:rtl;)。

因此，您需要将该filled类应用于最后两个跨度标签。

于 2013-10-15T16:05:02.353 回答
0 


.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>
于 2014-03-09T16:26:03.570 回答