how can I do the hover effect like a rating star in this code css html?

Question

I had a problem to do the hover thing for this rating code. If it go to the second circle, the first two will highlight, go to third, the first three will highlight. I know I should use + ~ >, but I just don't really understand how to use these to achieve what I want. Appreciate. click and see the code.

#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

I've changed your couple of selectors, will explain you whats going on behind the scenes...

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

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

Demo

Explanation :

What I am doing is on hover of the #rating_bar wrapper am coloring all the 0's to green and than on hover of a specific 0 I am coloring the trailing ones with grey.. I hope that explains you..

Answer 2

Try this

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