Question

我正在学习角度，并试图创建一个简单的界面，用户可以点击一个元素（可能的3个）和一些with_drb_reporter应用。当用户将鼠标悬停在元素上时，将应用另一个影响。我目前的问题是：

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

JSfiddle here，请指教。

HTML：

css

JS：

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

CSS：

 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;
    }
  }
 }]);

Answer 1

我已更新小提琴，请查看JsFiddle

.addHover：hover＆gt;跨度 { 颜色：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}">

现在所选项目悬停不会发生

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

1 个答案: