如何修复星级评分悬停在CSS中

Question

我有一个离子移动应用程序。应用程序中的众多模块之一是评论和评级。通过实施这样的模块，我添加了一个星星，用户可以通过点击一到五颗星来点击是否要为特定用户评分。

问题在于，一旦用户选择某个星形，例如5，然后点击应用程序中的其他部分，星星就会消失。

如果用户点击星级以外的星号，则所选的星号将消失。如何解决这样的错误？

HTML：

<div class="rating">
   <!-- <ion-icon name="star"></ion-icon> -->
   <span (click)="rate(5)">☆</span>
   <span (click)="rate(4)">☆</span>
   <span (click)="rate(3)">☆</span>
   <span (click)="rate(2)">☆</span>
   <span (click)="rate(1)">☆</span>
</div>

CSS：

page-review {

  .rating {
    display: flex;
    justify-content: center;
  }

  .star {
    // after: '\f2fc<br>\f2fc \f2fc \f2fc \f2fc';
  }

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

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

  .rating>span {
    display: inline-block;
    position: relative;
    width: 1.1em;
    font-size: 40px;
    color: #F2AF01;
  }

  p {
    font-size: 20px;
  }

  .review-description {
    margin-bottom: 50px;
  }
}

Answer 1

要让星星保持满（或画），你只需要一个CSS类，你的.ts文件和Angular的[ngClass]中的属性。

HTML：

<div class="rating" (mouseenter)="isHover = true" (mouseleave)="isHover = false">
  <!-- Since you're using rtl to make it work the ngClass is also rtl. -->
  <span (click)="rate(5)" [ngClass]="{'full-star': rating >= 5 && !isHover}">☆</span>
  <span (click)="rate(4)" [ngClass]="{'full-star': rating >= 4 && !isHover}">☆</span>
  <span (click)="rate(3)" [ngClass]="{'full-star': rating >= 3 && !isHover}">☆</span>
  <span (click)="rate(2)" [ngClass]="{'full-star': rating >= 2 && !isHover}">☆</span>
  <span (click)="rate(1)" [ngClass]="{'full-star': rating >= 1 && !isHover}">☆</span>
</div>

ngClass如果其中的条件为真，则会添加一个类，您可以在花括号内部有多个类和条件，它们必须是{'class': condition}。

(mouseenter)和(mouseleave)是Angular事件，他们将isHover设置为true或false。使用isHover，因此当鼠标悬停在评级星上时，它不会被涂抹。没有它，例如，如果你选择5颗星，并且悬停在第一颗星星中，所有的星星都会被涂上，并且会留下一种感觉，即评级不起作用，baaaaad UX。

现在到你的.ts文件，只需要添加两个属性：

export class YourPageClass{
  public rating: number = 0; // you may already have a rating property.
  public isHover: boolean =  false;

  constructor(){}

  rate = (r) => (this.rating = r);
}

我假设您已经拥有一个评级属性，当用户点击星标时，该属性将保持评级值，如果是这样，只需在rate()内和[ngClass]内使用您自己的评级属性

将此类添加到您的SCSS文件

.full-star:before {
  content: "\2605";
  position: absolute;
}

就是这样，通过这种方式，你可以实现恒星保持饱满/涂抹的效果。

希望这有帮助。