我想通過(guò)CSS創(chuàng)建星級(jí)。當(dāng)用戶將鼠標(biāo)懸停在最后一顆星星上時(shí)，該星星之前的所有星星必須具有另一種顏色，例如:我將鼠標(biāo)懸停在minStar3上，那么minStar1、minStar2和minStar3必須具有不同的顏色。

<i id="minStar1" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar2" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar3" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar4" class="fa fa-star fa-lg" aria-hidden="true"></i>
<i id="minStar5" class="fa fa-star fa-lg" aria-hidden="true"></i>

您可以使用Flexbox創(chuàng)建它，并使用flex-direction: row-reverse更改元素的順序。還可以使用~ general sibling選擇器來(lái)選擇懸停元素之后的所有同級(jí)元素。

.rating {
  display: inline-flex;
  flex-direction: row-reverse;
}
i {
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid black;
  transition: all 0.3s ease-in;
}
i:hover ~ i,
i:hover {
  background: black;
}

<div class="rating">
  <i id="minStar1" class="fa fa-star fa-lg" aria-hidden="true"></i>
  <i id="minStar2" class="fa fa-star fa-lg" aria-hidden="true"></i>
  <i id="minStar3" class="fa fa-star fa-lg" aria-hidden="true"></i>
  <i id="minStar4" class="fa fa-star fa-lg" aria-hidden="true"></i>
  <i id="minStar5" class="fa fa-star fa-lg" aria-hidden="true"></i>
</div>

我以前在SO上見(jiàn)過(guò)這個(gè)把戲，但是找不回來(lái)了。

為此，顛倒星星的順序。 將它們包裝在一個(gè)元素中(如p或div) 給包裝說(shuō)明:rtl。

通過(guò)反轉(zhuǎn)方向，可以使用~ sibling選擇器。

i {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: green;
}

p {
  text-align: left;
  direction: rtl;
}
p>i:hover,
p>i:hover~i {
  background: red;
}

<p>
  <i id="minStar5" class="fa fa-star fa-lg" aria-hidden="true">5</i>
  <i id="minStar4" class="fa fa-star fa-lg" aria-hidden="true">4</i>
  <i id="minStar3" class="fa fa-star fa-lg" aria-hidden="true">3</i>
  <i id="minStar2" class="fa fa-star fa-lg" aria-hidden="true">2</i>
  <i id="minStar1" class="fa fa-star fa-lg" aria-hidden="true">1</i>
</p>

我知道這是一個(gè)老話題，但我發(fā)現(xiàn)了一個(gè)簡(jiǎn)單的方法，只在css中進(jìn)行星級(jí)評(píng)定。 如果父元素是懸浮的，我填充所有的星星。然后我清空聚焦星旁邊的所有星星:

.container {
    pointer-events: none;
}

.container .star{
    pointer-events: auto;
    color:grey;
}

.container:hover .star{
    color:yellow;
}

.container .star:hover ~ .star{
    color:grey;
}