jquery - 在星级评分系统中悬停时设置星星颜色

Question

我的星级评分系统有一个非常棘手的问题。首先，我从 CMS 获得星星并给他们唯一的 ID。

当我的页面未被评级时，我有:

<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 个绿色的星星，希望您能理解。

现在我的问题当我指向星星时，如何让它们从左到右变成金色？例如，我指向第三颗星，所以第一颗、第二颗和第三颗必须将颜色改为金色。我试图在 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/

如果您不想这样做，您可以使用背景图片实现相同的结果。创建了具有您需要的两种状态的星星图像 Sprite ，并根据父容器的类更改背景位置。