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

Question

我有一个问题是为此评级代码做悬停的事情。如果它转到第二个圆圈，前两个将突出显示，转到第三个，前三个将突出显示。我知道我应该使用+〜＆gt;，但我真的不明白如何使用它们来实现我想要的。欣赏。点击查看代码。

#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;
}

Demo

说明：

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

Answer 2

试试这个

＆＃13;

＆＃13;

#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;

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;