Question

我有10个圆圈（Fontawesome图标）水平放置。当用户将鼠标悬停在任何图标上时，我想填充颜色。例如：如果用户在第5个圆圈上盘旋，则第5个圆圈的所有圆圈都应填充颜色。（评级系统中的东西）我该怎么做？

以下是我渲染10个圆圈的代码。

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

没有CSS示例。我没有看到将任何JS添加到可以通过CSS完成的事情上的巨大价值。如果您还需要单击事件，则它就像1个跨度上的1个类一样简单。我还建议阅读：

Decoupling Your HTML, CSS, and JavaScrip我的代码没有这样做。

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>

悬停位置的颜色图标

1 个答案: