Javascript 使用 ng-style 设置样式后，在悬停时更改背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14105845/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make background color change on hover after setting style using ng-style
提问by Daniel
I have a list of words with a number (streak) assigned to each word. I set the background color of each word based on the number assigned to it using AngularJS's ng-style.
我有一个单词列表，每个单词都有一个数字（条纹）。我使用 AngularJS 的 ng-style 根据分配给它的数字设置每个单词的背景颜色。
html
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 that is called from ng-style.
从 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};
}
This works, however, I would like the background to be highlighted when the mouse hovers over a word. I added a class "tHi" that normally would change the background on hover, but it is overridden by the added style.
但是，这是有效的，当鼠标悬停在单词上时，我希望突出显示背景。我添加了一个类“tHi”，它通常会在悬停时更改背景，但它被添加的样式覆盖。
Here is a jsfiddlethat demonstrates this issue.
这是一个演示此问题的jsfiddle。
Is there a better way to set the background than ng-style so that it corresponds to the number assigned to each word? Or is there a way to highlight when a user hovers over a word?
有没有比 ng-style 更好的方法来设置背景，使其对应于分配给每个单词的数字？或者有没有办法在用户将鼠标悬停在单词上时突出显示？
回答by David says reinstate Monica
This is one of the very few cases where I'd actually suggest using !importantin CSS:
这是我实际上建议!important在 CSS 中使用的极少数情况之一：
.tHi:hover {
cursor: pointer;
background-color: #9f9 !important;
}
Using the !importantkeyword essentially causes the rule to be applied regardless of the specificity of the selector (assuming that a more-specific selector doesn't alsohave the !importantkeyword, of course). It does, however, have the potential to make debugging quite difficult, if you, or your colleagues, forget about the use of the !important.
使用!important基本上关键字导致规则而不管选择器的特异性的施加（假设一个更具体的选择器不还具有!important关键字，当然）。这不，但是，必须使调试相当困难的，如果你或你的同事，忘记了使用的潜力!important。
References:
参考：
回答by Mark Rajcok
If you don't want to use !important, you can add the class dynamically using ng-mouseover:
如果您不想使用!important，您可以使用ng-mouseover动态添加类：
<li ng-repeat="item in items" ng-click="getEdit(item.word)"
ng-style="bgstyle(item.streak)" ng-mouseover="hover($event)">
Then add to your controller:
然后添加到您的控制器：
$scope.hover = function(e) {
angular.element(e.srcElement).addClass('tHi')
}
Manipulating the DOM in a controller is not "best practice". A directive would be better.
在控制器中操作 DOM 不是“最佳实践”。一个指令会更好。
Update:Here's a directive
更新：这是一个指令
myApp.directive('ngHover', function() {
return {
link: function(scope, element) {
element.bind('mouseenter', function() {
angular.element(element.children()[0]).addClass('tHi')
})
}
}
});
children()[0]is used to apply the class to the span, not the li, so as not to conflict with the ng-style.
children()[0]用于将类应用于span，而不是li，以免与ng-style发生冲突。
Use as follows:
使用方法如下：
<li ng-repeat="item in items" ng-click="getEdit(item.word)"
ng-style="bgstyle(item.streak)" ng-hover>
回答by Jamie Le Sou?f
I found through a directive was the easiest way.
我发现通过指令是最简单的方法。
App.directive('attr', function(){
return function(scope, element) {
element.bind('mouseenter', function(){
element.addClass('hover');
}).bind('mouseleave', function(){
element.removeClass('hover');
})
}
})
