Javascript 替换

Question

好吧，首先我对我的上一篇文章感到非常抱歉，但我真的需要帮助，我会把我真正想要的东西放在一个更清晰的代码中。我不擅长 javascript，所以希望你能帮助我。

<span class="rating ipsType_smaller">
                <a href="" id="topic_rate_1" title="Rate topic 1 star">
                <i class="fa fa-star-o fa-lg rate_img"></i>
                </a>
                <a href="" id="topic_rate_2" title="Rate topic 2 stars">
                <i class="fa fa-star-o fa-lg rate_img"></i>
                </a>
                <a href="" id="topic_rate_3" title="Rate topic 3 stars">
                <i class="fa fa-star-o fa-lg rate_img"></i>
                </a>
                <a href="" id="topic_rate_4" title="Rate topic 4 stars">
                <i class="fa fa-star-o fa-lg rate_img"></i>
                </a>
                <a href="" id="topic_rate_5" title="Rate topic 5 stars">
                <i class="fa fa-star-o fa-lg rate_img"></i>
                </a>
</span>

好的，这里是 html。 IPB 制作一切，但我想用 javascript 做一个小的编辑。如果它会改变 css 的 html 也没问题，两者都是相同的，所以这就是我在想的:

当我将鼠标悬停在 star 2 上时，star 1 和 star 2 将具有相同的新类，或者将更改为新的类当我升到第 4 星时，第 4 星和第 4 星之前的所有星都会有新的相同类别，或者将更改为相同的新事物

当我点击星号 4 或任何星号 2 时，一个新类(class)将被添加到这个类(class)。

这可以通过 javascript 完成吗？

Answer 1

当然你可以用 JS 实现，也可以只用 CSS。

假设你想改变背景，

.rating:hover > a {
    background: red;         /* Set it for all elements */
}
.rating > a:hover ~ a {
    background: transparent; /* Unset it for following elements */
}

Demo