如何修复星级css和html

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>

CSS

 page-review {
   .rating {
    display: flex;
    justify-content: center;

  }



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

 .rating {
   unicode-bidi: bidi-override;
    direction: rtl;
   }
  .rating>span:hover:before,
  .rating>span:hover~span:before {
   content: "\2605";
   position: absolute;
  }

  .rating {
   unicode-bidi: bidi-override;
  direction: rtl;
  }
 .rating>span {
   display: inline-block;
   position: relative;
  width: 1.1em;
  font-size: 40px;
  color: #F2AF01;
  }
  .rating>span:hover:before,
  .rating>span:hover~span:before {
   content: "\2605";
   position: absolute;
  }

  p{
  font-size: 20px;
 }

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

Answer 1

你可以使用ionic-ratings

当您完成安装和导入的所有步骤后，您可以像使用它一样

  $scope.ratingsObject = {
    iconOn: 'ion-ios-star',    //Optional 
    iconOff: 'ion-ios-star-outline',   //Optional 
    iconOnColor: 'rgb(200, 200, 100)',  //Optional 
    iconOffColor:  'rgb(200, 100, 100)',    //Optional 
    rating:  2, //Optional 
    minRating:1,    //Optional 
    readOnly: true, //Optional 
    callback: function(rating, index) {    //Mandatory 
      $scope.ratingsCallback(rating, index);
    }
  };

  $scope.ratingsCallback = function(rating, index) {
    console.log('Selected rating is : ', rating, ' and the index is : ', index);
  };

Answer 2

好吧，您正在使用 :hover 和一个 非常有趣 的倒置 HTML 顺序和文本方向切换的组合，以便使用 ~ 通用兄弟选择器来填充前面的星号，即惊人的。

但是您是通过使用 CSS :hover 来实现的，这实际上适用于鼠标悬停在桌面上的元素时。一旦指针离开， :hover 状态就结束了，因此，CSS 在悬停时应用的任何样式都将消失。

在移动设备上，没有真正的 :hover 状态，因为没有鼠标指针开始，但是一些引擎使用水龙头代替.. 但是，当您点击其他任何地方时，“指针”将不再位于元素，因此 :hover 状态结束。

我不熟悉 ionic，但您似乎需要修改您的 rate() 方法（或在单击时添加另一个方法）以显示当前值。

从 CSS 的角度来看，一个简单的方法是使用与 :hover 状态相同的 CSS“选定”类，您可以在单击时将其添加到选定元素（如果存在，则从其他元素中删除）。

从CSS的角度来看，应该是这样的：

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

为了保持干燥，您可以将其添加到与设置悬停相同的规则中

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

顺便说一句，您的 .rating 和 .rating>span:hover~span:before 规则有 2 个相同的副本，以及 .rating>span:hover:before 规则的 3 个相同的副本，您可能还想清理它.