如何在此代码 css html 中像评级星一样实现悬停效果？

Question

我在为这个评级代码做悬停事情时遇到了问题。 如果转到第二个圆圈，前两个将突出显示，转到第三个，前三个将突出显示。 我知道我应该使用 + ~ >，但我真的不明白如何使用这些来实现我想要的。 欣赏。 点击查看代码。

 #rating_bar{ width:100px; height:100px; margin: 4px 175px !important; display:inline-block; display:inline; } #rating_bar > span:before{ content:'O'; color: #c7c5c5; cursor:pointer; font-size:3em; } #rating_bar > span:hover:before { color: #4bce32; }

 <div id="rating_bar"> <span id="rate_1"></span> <span id="rate_2"></span> <span id="rate_3"></span> <span id="rate_4"></span> <span id="rate_5"></span> </div>

Answer 1

我已经更改了您的几个选择器，将向您解释幕后发生的事情......

#rating_bar:hover > span:before {
    color: #4bce32;
}

#rating_bar > span:hover ~ span:before {
    color: #c7c5c5;
}

演示

解释 ：

我正在做的是在#rating_bar包装器悬停时将所有 0 着色为绿色，而不是在特定 0 悬停时将尾随的颜色着色为灰色..我希望能解释你..

Answer 2

尝试这个

 #rating_bar { width: 100px; height: 100px; margin: 4px 175px !important; display: inline-block; display: inline; unicode-bidi: bidi-override; direction: rtl; } #rating_bar>span:before { content: 'O'; color: #c7c5c5; height: 100px; width: 100px; cursor: pointer; font-size: 3em; } #rating_bar>span:hover:before, #rating_bar span:hover~span:before { color: #4bce32; }

 <div id="rating_bar"> <span id="rate_1"></span> <span id="rate_2"></span> <span id="rate_3"></span> <span id="rate_4"></span> <span id="rate_5"></span> </div>