Question

我有一个单词列表，每个单词都有一个数字（条纹）。我根据使用AngularJS的ng-style分配给它的数字设置每个单词的背景颜色。

HTML

   <ul class="unstyled">
     <li class="tHi" ng-repeat="item in items" ng-click="getEdit(item.word)" ng-style="bgstyle(item.streak)">
       <span>{{item.word}} {{item.streak}}</span>
     </li>
   </ul>

从ng-style调用的javascript。

$scope.bgstyle = function (streak) {
    var red = 255;
    var green = 255-streak;
    var blue = 255-streak;
    var rgb = blue | (green << 8) | (red << 16);
    var sColor = '#' + rgb.toString(16);
    return {backgroundColor: sColor};
}

但是，当鼠标悬停在单词上时，我希望突出显示背景。我添加了一个类“tHi”，它通常会在悬停时改变背景，但它会被添加的样式覆盖。

以下是展示此问题的jsfiddle。

是否有更好的方法来设置背景而不是ng-style，以便它对应于分配给每个单词的数字？或者有没有办法突出显示用户在单词上悬停？

Answer 1

这是我实际建议在CSS中使用!important的极少数情况之一：

.tHi:hover {
    cursor: pointer;
    background-color: #9f9 !important;
}

Updated JS Fiddle demo

使用!important关键字实际上会导致应用规则而不管选择器的特殊性（假设更具体的选择器不也具有{{1}当然是关键字）。但是，如果您或您的同事忘记!important的使用，有可能使调试变得非常困难。

参考文献：

!important。

Answer 2

如果您不想使用!important，可以使用ng-mouseover动态添加该类：

 <li ng-repeat="item in items" ng-click="getEdit(item.word)" 
    ng-style="bgstyle(item.streak)" ng-mouseover="hover($event)">

然后添加到您的控制器：

$scope.hover = function(e) {
    angular.element(e.srcElement).addClass('tHi')
}

在控制器中操作DOM不是“最佳实践”。指令会更好。

更新：这是一个指令

myApp.directive('ngHover', function() {
  return {
    link: function(scope, element) {
       element.bind('mouseenter', function() {
          angular.element(element.children()[0]).addClass('tHi')
       })
    }
  }
});

children()[0]用于将类应用于span而不是li，以免与ng-style冲突。

使用如下：

<li ng-repeat="item in items" ng-click="getEdit(item.word)"
  ng-style="bgstyle(item.streak)" ng-hover>

Fiddle

Answer 3

我通过指令找到了最简单的方法。

App.directive('attr', function(){
    return function(scope, element) {
        element.bind('mouseenter', function(){
            element.addClass('hover');
        }).bind('mouseleave', function(){
          element.removeClass('hover');
        })
    }
})

使用ng-style设置样式后，在悬停时更改背景颜色

3 个答案: