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

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

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

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

更新了JS Fiddle演示.

使用!important基本上关键字导致规则而不管选择器的特异性的施加(假设一个更具体的选择器不还具有!important关键字,当然).但是,如果你或你的同事忘记使用它,它确实有可能使调试变得非常困难!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>

小提琴