AngularJS - 無法刪除另一個樣式添加點擊後的懸停樣式

Question

我正在學習角度，並試圖創建一個簡單的界面，用戶可以點擊一個元素（超出可能3）和一些css應用。當用戶將鼠標懸停在元素上時，會應用另一個影響。我目前的問題是：

1.我達到了所需的功能，但我覺得這是「不是角度的方式」，而是看起來像一個黑客。
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

我已經更新了小提琴請JsFiddle

.addHover：hover> span { color：rgba（49，49，49，0.47）; }

在納克級的我已經更新了這個

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

現在所選擇的項目懸停不會發生