使用CSS的评级系统（从左向右悬停）

有没有一种简单的方法可以在悬停时反转颜色顺序

使用这个技巧，我得到了右>左的顺序：

&:hover,
&:hover ~ button {
    color: red
}

摆弄右>左：

左>右的示例：

我不可能使用

float

，

位置：绝对和任何更改当前html正确顺序的内容

普通CSS示例：


按钮{
保证金：0；
填充物：5px；
边界：无；
背景：透明；
显示：内联块；
}
按钮：之前{
内容：“⋆";
字体大小：5rem；
线高：1；
}
按钮：悬停，
按钮：悬停~按钮{
颜色：红色；
}
一种方法是将鼠标悬停在
.wrapper
上时，使所有子
按钮
元素
颜色为红色；
。然后使用同级选择器（
~
）将当前悬停元素之后的任何元素更改为
颜色：黑色；

您应该删除元素之间的任何空白（在本例中，我将它们放在HTML的一行中），以确保光标始终悬停在星形上

简单CSS示例：


.wrapper按钮{
保证金：0；
填充物：5px；
边界：无；
背景：透明；
显示：内联块；
}
.包装器按钮：之前{
内容：“⋆";
字体大小：5rem；
线高：1；
}
.包装器按钮：悬停~按钮{
颜色：黑色；
}
.包装器：悬停按钮{
颜色：红色；
}

你做到了，而且方法很聪明。非常感谢@HiddenHobbes@HiddenHobbes您还可以在
.wrapper
元素上设置
font-size:0
，以消除CSS中的空白。只需确保以后重新定义它（您可以这样做）.@easwee-Yup这也行得通，因为已经为伪元素重新定义了
字体大小
，所以在本例中，这可能是更好的方法。