悬停时反应更新反馈星色

Question

我在玩一个React组件here。

当鼠标悬停在星形上时，我试图更改其颜色，而在其活动时不更改其颜色。到目前为止，我的操作方式是，当我将鼠标悬停在1颗星上时，它会改变所有星的颜色。是否可以仅更改鼠标悬停的星形？我要进行的设置是将空的星形默认设置为白色，然后通过star_over（）函数对其进行更新。

disabled

组件：

constructor() {
        super();

        this.state = {
          rating: 0,
          empty: '#fff'
        };
    }

    onStarClick(nextValue, prevValue, name) {
        this.setState({rating: nextValue});
    }

    handleSubmit = () => {
        console.log("Sub")
    }

    star_over() {
        this.setState({empty: '#2C81B7'});
    }

    star_out() {
        this.setState({empty: '#fff'});
    }

更新

尝试通过添加悬停来使用CSS进行操作，但未突出显示空星星，如下图所示。也需要突出显示第四个星星，而第三个保持绿色。然后，如果您突出显示第二颗星星，那么第三颗星星将是空的。