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>

Refer this: [Turn a number into star rating display using jQuery and CSS](http://stackoverflow.com/questions/1987524/turn-a-number-into-star-rating-display-using-jquery-and-css/1987545#1987545) — Rahul Tripathi, Apr 09 '15 at 05:50

score 10 · Accepted Answer · answered Apr 09 '15 at 05:51

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

Akshay · Answer 2 · 2020-03-17T05:57:13.583

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>

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

2 Answers2

Linked