css - AngularJS - 单击添加另一种样式后无法删除悬停样式

Question

我正在学习 Angular 并尝试创建一个简单的界面，用户可以在其中点击一个元素(可能有 3 个元素)并应用一些 css。当用户将鼠标悬停在元素上时，会应用另一种影响。我目前的问题是:

1. 我实现了所需的功能，但我觉得这“不是 Angular 方式”，而是看起来像 hack。
2. 一旦用户悬停一个元素并选择它，我不知道如何禁用该元素的悬停效果。

JSfiddle here ，请指教。

HTML:

<div ng-app='myApp'>
  <div ng-controller='myController'>
 <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <div class="row">
        <div class="col-lg-4 col-md-4 statTab" id="1" ng-click="toggleSelected($event)" ng-class="{'statNumberActive' : toggle1}">
          <span class="statNumber">0</span>
          <span class="statDescription">Views</span>
        </div>
        <div class="col-lg-4 col-md-4 statTab" id="2" ng-click="toggleSelected($event)" ng-class="{'statNumberActive' : toggle2}">
          <span class="statNumber">0</span>
          <span class="statDescription">Reads</span>
        </div>
        <div class="col-lg-4 col-md-4 statTab" id="3" ng-click="toggleSelected($event)" ng-class="{'statNumberActive' : toggle3}">
          <span class="statNumber">0</span>
          <span class="statDescription">Commens</span>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

JS:

 var myApplication = angular.module('myApp', []);

 myApplication.controller('myController', ['$scope', function($scope) {
  $scope.toggleSelected = function(item) {
    var id = item.currentTarget.id;
    switch (id) {
      case "1":
        $scope.toggle1 = true;
        $scope.toggle2 = false;
        $scope.toggle3 = false;
        break;
      case "2":
        $scope.toggle1 = false;
        $scope.toggle2 = true;
        $scope.toggle3 = false;
        break;
      case "3":
        $scope.toggle1 = false;
        $scope.toggle2 = false;
        $scope.toggle3 = true;
        break;
    }
  }
 }]);

CSS:

.statNumberActive {
  color: rgba(0, 0, 0, .8) !important;
  border-bottom: none !important;
}

.statNumber {
  font-weight: 700;
  font-style: normal;
  font-size: 50px;
  display: block;
  line-height: 40px;
  height: 40px;
  margin-bottom: 5px;
  letter-spacing: -.04em;
  transition: all ease .3s;
}

.statDescription {
  color: rgba(109, 109, 109, 0.3);
  font-size: 18px;
  transition: all ease .3s;
  font-weight: bold;
}

.statTab {
  height: 76px;
  border-bottom: 1px solid rgba(0, 0, 0, .3);
  color: rgba(109, 109, 109, 0.3);
  transition: all ease .3s;
}

.statTab span {
  padding-left: 10px;
}

.statTab:hover > span {
  color: rgba(49, 49, 49, 0.47);
}

Answer 1

我已经更新了 fiddle 请检查JsFiddle

.addHover:hover > span { color: rgba(49, 49, 49, 0.47); }

在 ng-class 我已经更新了这个

    <div class="col-lg-4 col-md-4 statTab addHover" id="2" ng-click="toggleSelected($event)" ng-class="{'statNumberActive' : toggle2,'addHover':!toggle2}">

现在不会发生选中项悬停