使用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樣式設置樣式後，在懸停時更改背景顏色

回答

相關問題