Question

我想通过CSS创建星级评分。当用户将悬停最后一颗星时，那颗星前的所有星星都必须有另一种颜色，例如：我将悬停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>

Answer 1

您可以使用Flexbox创建此内容，并使用flex-direction: row-reverse更改元素的顺序。您还可以使用~一般兄弟选择器来选择悬停元素之后的所有兄弟元素。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我之前在SO上看过这个技巧，但是找不到它。

为此，颠倒星星的顺序将它们包裹在元素中（例如p或div）
给那个包装器direction: rtl。

通过反转方向，可以使用~兄弟选择器。

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>

CSS之前悬停在元素上

2 个答案: