Question

我的星级评分系统存在相当棘手的问题。首先，我从CMS获得明星并给予他们独特的身份。

当我的页面没有评级时，我有：

<div class="rated">
    <a class="star" href="#" onclick="star(1,6226,0,0,1439 ,0)" "="">
        <span>★</span>
    </a>
    <a class="star" href="#" onclick="star(2,6226,0,0,1439 ,0)" "="">
        <span>★</span>
    </a>
    <a class="star" href="#" onclick="star(3,6226,0,0,1439 ,0)" "="">
        <span>★</span>
    </a>
    <a class="star" href="#" onclick="star(4,6226,0,0,1439 ,0)" "="">
        <span>★</span>
    </a>
    <a class="star" href="#" onclick="star(5,6226,0,0,1439 ,0)" "="">
        <span>★</span>
    </a>
</div>

（@ Admin，Morerator - 如何制作新行？）

当我的页面被评为时，我有：

<div class="punkty" id="punkty1445">
    <div class="rating">
        <a class="star" href="#" onclick="star(1,6256,6,2,1445 ,3)">
            <span>★</span>
        </a>
        <a class="star" href="#" onclick="star(2,6256,6,2,1445 ,3)">
            <span>★</span>
        </a>
        <a class="star" href="#" onclick="star(3,6256,6,2,1445 ,3)">
            <span>★</span>
        </a>
    </div>
    <div class="rated">
        <a class="star" href="#" onclick="star(4,6256,6,2,1445 ,3)" "="">
            <span>★</span>
        </a>
        <a class="star" href="#" onclick="star(5,6256,6,2,1445 ,3)" "="">
            <span>★</span>
        </a>
    </div>
    <span class="oc" itemprop="average" id="glos1445" style="font-weight:bold;margin-right: 10px;">3</span>
</div>

正如您在第二个示例中所看到的，平均页面速率是按类评级设置的（我将它们设为绿色）。等级评级我开始投票（这里3绿2蓝）。在第一个例子中5蓝色所以它们都是可点击的，当你只有一个投票给5时，我们会看到5颗绿色星星，我希望你能理解它。

现在我的问题当我指向星星时，如何让它们从左到右改变颜色为金色？对于exaple，我指向第三颗星，所以第一和第三星必须改变颜色为金。我试图在css中制作它，但它们是从右到左的金色（我不能告诉你，因为在所有的jsfiddle等。从左到右是正常的）。我认为这将是可能的一些硬核jquery。请帮帮我，这对我来说非常重要。

Answer 1

如果我是你，这就是我将如何解决这个问题。我会为星星使用图标字体，网上有免费的图标字体：http://sixrevisions.com/resources/free-icon-fonts/。

关于图标字体的惊人之处在于它易于实现，您可以像更改字体颜色一样更改图标的大小和颜色。实现图标字体后，您可以添加以下css：

.rated{
 color : blue;
} 
.rating{
 color : red;
}

默认情况下，星星为蓝色，用户所做的选择会变为红色。有关如何实现图标字体的教程：http://designshack.net/articles/css/how-to-implement-some-slick-icons-using-a-font-and-css/

如果您不想这样做，您可以使用背景图像获得相同的结果。使用您需要的两个状态创建星星的图像精灵，并根据父容器的类更改背景位置。

在星级系统中悬停时设置星星颜色

1 个答案: