CSS悬停在前面的元素上

我想通过CSS创建星级。当用户将鼠标悬停在最后一颗星上时，该颗星之前的所有星星必须有另一种颜色，例如：我将鼠标悬停在minStar3上，然后minStar1、minStar2和minStar3必须有不同的颜色

<i id="minStar1" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar2" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar3" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar4" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar5" class="fa fa-star fa-lg" aria-hidden="true"></i>

---

您可以使用

Flexbox

来创建它，并使用

flex direction:row reverse来更改元素的顺序。您还可以使用常规同级选择器选择悬停元素之后的所有同级元素


.rating{
显示：内联flex；
弯曲方向：行反向；
}
我{
宽度：20px；
高度：20px；
保证金：5px；
边框：1px纯黑；
过渡：所有0.3秒都容易进入；
}
i：悬停~i，
i:悬停{
背景：黑色；
}
我以前看过这个把戏，但现在找不到了

要执行此操作，请颠倒星星的顺序。

将它们包装在一个元素中（如
p
或
div
）

给那个包装器
方向：rtl

通过反转方向，可以使用
~
同级选择器


i{
显示：内联块；
宽度：50px；
高度：50px；
背景：绿色；
}
p{
文本对齐：左对齐；
方向：rtl；
}
p> i:悬停，
p> i：悬停~i{
背景：红色；
}

5.
4.
3.
2.
1.
你会反对使用一个小的jQuery脚本来实现这一点吗？如果有可能只使用CSS，我只想使用它。这几乎是完美的，但我的星星可以被点击，点击之前的所有星星都有不同的颜色（我给他们新的class=“shine”）。当我实现您的解决方案时，即使不悬停，我的颜色也会反转。现在应该发光的“星星”在右边，而不是左边。@DonLeo With
flex direction:row reverse元素的顺序颠倒了，所以现在html中的第一个元素实际上是你们在屏幕上看到的最后一个元素，所以若你们想在前三个元素上添加一些东西，你们可以像这样在html中的最后三个元素上添加