星级评分组件在悬停时填充所有以前的星星答案

【问题标题】：Star Rating component fill all previous stars on hover星级评分组件在悬停时填充所有以前的星星
【发布时间】：2021-04-04 14:19:56
【问题描述】：

我目前正在为我们的网站制作星级评分组件，我使用 angular11（我认为应该没关系），到目前为止，我已经根据当前评分值等渲染了 5 颗星，但我很难得到悬停的样式正确。

例如，基本上，如果我有 5 颗星中的 2 颗，并且我悬停在第 4 颗星上，则第 3 颗星也应该被填充。我很难找到正确的 CSS 来实现这一目标这就是我到目前为止在 CSS 中得到的结果

.rating-icon-empty { fill: #9e9e9e }
.rating-icon { fill: #7C4DFF; margin-right: 5px; }
.editable .rating-icon-empty:hover { fill: #7C4DFF; cursor: pointer;}

我当前的 CSS 只填充悬停的星星，而不是之前未填充的星星。

有没有办法使用纯 CSS 来实现这一点，还是我需要为每个星星依赖悬停侦听器？

【问题讨论】：

在您的问题中包含带有内联 SVG 的 HTML 会很有用。
看这里：codepen.io/jamesbarnett/pen/vlpkh 效果很好（我集成成功了）。

标签： html css angular

【解决方案1】：

我之前遇到过你的问题，请阅读以下内容：

第一个解决方案：

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  }

<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>

来源：

https://codepen.io/jamesbarnett/pen/vlpkh

第二种解决方案：

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
}

.rating>span {
    display: inline-block;
    position: relative;
    width: 1.1em;
}

.rating>span:hover:before,
.rating>span:hover~span:before {
    content: "\2605";
    position: absolute;
}

<body>
    <div class="rating">
        <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
    </div>
</body>

来源：

https://css-tricks.com/star-ratings/

如果您有任何问题，请告诉我。

【讨论】：