CSS在元素前悬停

Question

CSS在元素前悬停

4

我想通过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>

- DonLeo

你介意使用一个小的jQuery脚本来实现这个吗？ - Frits

如果有可能只使用CSS，我想只使用它。 - DonLeo

3个回答

5

我在这里看到过这个技巧，但找不回来了。

要实现这个技巧，需要倒转星号的顺序。将它们包裹在元素中（如 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>

- GreyRoofPigeon

0

我知道这是一个旧的帖子，但我找到了一种在 CSS 中实现星级评分的最简单方法。如果父元素被悬停，我会填充所有的星星。然后，我会清空焦点星星旁边的所有星星:

.container {
    pointer-events: none;
}

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

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

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

- Pierre Fiorelli

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nenad Vracar · Accepted Answer

你可以使用 Flexbox 来创建这个效果，并使用 flex-direction: row-reverse 改变元素的顺序。你也可以使用 ~ 通用兄弟选择器来选择所有在悬停元素之后的同级元素。

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