javascript - 使用 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 风格调用的 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 关键字本质上会导致应用规则，而不管选择器的具体性如何(假设更具体的选择器不也 !important 当然是关键字)。但是，如果您或您的同事忘记使用 !important，它确实可能会使调试变得相当困难。

引用资料:

• !important .