我目前正在为我们的网站制作一个星级评级组件，我使用angular11（应该无关紧要我认为），到目前为止，我有5星的渲染取决于当前的评级值等，但我努力得到的样式为悬停正确。
例如，如果我有5颗星中的2颗，我在第4颗星上悬停，第3颗星也应该填满。我很难找到正确的css来实现这一点，这就是我目前在css中所得到的
.rating-icon-empty { fill: #9e9e9e }
.rating-icon { fill: #7C4DFF; margin-right: 5px; }
.editable .rating-icon-empty:hover { fill: #7C4DFF; cursor: pointer;}
我当前的CSS只填充悬停的星，而不填充以前未填充的星。
有没有一种方法可以用纯CSS实现这一点，或者我需要依赖每个星的悬停侦听器？
我以前也遇到过你的问题，看看这些:
如果你有什么问题，请告诉我。
