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

我有一个单词列表（条纹）分配给每个单词。我使用AngularJS的ng-style设置每个单词的背景颜色。使用ng样式设置样式后，在悬停时更改背景颜色

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>

的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风格，以便它对应于分配给每个单词的号码？或者有什么方法可以突出显示用户何时悬停在单词上？

来源

2012-12-31 Daniel

这是极少数情况下，其实我建议在CSS使用!important之一：

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

Updated JS Fiddle demo。

使用!important关键字本质上使无论选择的特异性的要应用的规则（假定一个更具体的选择不当然不是也具有!important关键字）。但是，如果您或您的同事忘记了!important的使用，那么确实会对产生调试困难。

参考文献：

!important。

来源

2012-12-31 20:44:56

如果你不想使用!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]用于类适用于跨度，而不是李，以免与NG-风格冲突。

使用方法如下：

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

Fiddle

来源

2012-12-31 21:55:37

我喜欢你的答案作为使用指令和ng-mouseover的例子。谢谢。另外，你的回答让我意识到以前没有发生过的事情。最简单的解决方案是添加类'tHi'来跨越而不是li。这样我不需要！重要的或指令。就像你说的那样避免了与ng风格的冲突。 – Daniel

伟大的观察。（并且它避免了所有额外的事件绑定和$监视。） –

这是一个完全正交的评论，但如果您只是为样式应用类，则始终可以使用好的CSS'CSS'并定义：hover。 – chug2k

我通过指令发现最简单的方法。

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

来源

2013-04-22 01:36:43

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

回答

相关问题