Farbsymbole bis zur Hover-Position

Question

Ich habe 10 Kreise (Fontawesome Icons) horizontal platziert. Ich möchte Farben zu ihnen füllen, wenn der Benutzer auf irgendein Symbol schwebt. Zum Beispiel: wenn der Benutzer auf dem 5. Kreis schwebt, sollten alle Kreise bis zum 5. Kreis eine Farbe ausfüllen. (So ​​etwas wie in einem Bewertungssystem) Wie kann ich es tun?

Folgendes ist der Code, den ich 10 Kreise render.

export const RatePersonalityCard = ({}) => { 
for (let score = 1; score < 11; score++) { 
    let scoreList = []; 

     scoreList.push(

      <div className="trait_vote_single tooltip" style={{fontSize:'40px',color:'gray'}} onClick={() => handleClick(score)}> 
       {/*<div className="trait_vote_circle"></div>*/} 
       <i className="fa fa-circle-thin" aria-hidden="true"></i> 
       <a className="trait_value" style={{marginTop:'-34px',marginLeft:'-1px'}}>{score}</a> 
       <span className="tooltiptext2 unchange_div" style={{marginLeft: '-40px'}}>{starvalue}</span> 
      </div> 
     ) 
    } 

    return (
     <div className=""> 
      <div className="single_trait_rate width_100 text_align_center">{userTraits.trait_name}</div> 
      <div className="trait_vote_div"> 
       {scoreList} 
      </div> 

     </div> 
    ); 
}; 

Answer 1

Sie können ein Hover-Ereignis für jedes Element der Scoreliste erstellen, das dem aktuell hovered Element und allem Vorherigen eine Klasse hinzufügt. Fügen Sie dann zu jedem Objekt ein Unschärfeereignis hinzu, um die Klasse zu entfernen.

function handleHover(e) { 
    let index = scoreList.indexOf(e.target); 

    for (let i = 0; i <= index; i++) { 
    scoreList[index].classList.add('highlight'); 
    } 
} 

function handleBlur(e) { 
    scoreList.forEach(function(item) { 
    item.classList.remove('highlight'); 
    }); 
} 

Answer 2

Kein CSS-Beispiel. Ich sehe keinen großen Wert beim Hinzufügen von JS zu etwas, das einfach über CSS getan werden kann. Wenn Sie auch ein Klickereignis benötigen, ist es so einfach wie 1 Klasse in 1 Bereich. Ich würde auch empfehlen zu lesen:

Decoupling Your HTML, CSS, and JavaScrip was mein Code nicht tut.

span .fa-star{ 
 
    display: none; 
 
} 
 

 
span:hover > .fa-star{ 
 
    color: yellow; 
 
    display: inline-block; 
 
    color: red; 
 
} 
 

 
span:hover > .fa-star-o{ 
 
    display: none; 
 
} 
 

 
span { cursor: pointer }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<span> 
 
<i class="fa fa-star-o" aria-hidden="true"></i> 
 
<i class="fa fa-star" aria-hidden="true"></i> 
 
<span> 
 
<i class="fa fa-star-o" aria-hidden="true"></i> 
 
<i class="fa fa-star" aria-hidden="true"></i> 
 
<span> 
 
<i class="fa fa-star-o" aria-hidden="true"></i> 
 
<i class="fa fa-star" aria-hidden="true"></i> 
 
<span> 
 
<i class="fa fa-star-o" aria-hidden="true"></i> 
 
<i class="fa fa-star" aria-hidden="true"></i> 
 
<span> 
 
<i class="fa fa-star-o" aria-hidden="true"></i> 
 
<i class="fa fa-star" aria-hidden="true"></i> 
 
</span> 
 
</span> 
 
</span> 
 
</span> 
 
</span>