AngularJS Material Design - md-Farben auf Knopf Hover

Question

Angular Material ist fantastisch für die Erstellung von Farb-Themen-Websites. Neben den üblichen Paletten, können Sie dynamische Themen ohne SCSS erstellen, wie Direktiven ...

md-colors="{background:'primary'}" 

... das Thema Farbe eines Elements einzustellen. Mit wenigen Zeilen Code wie diesen, können Sie leicht die Farbe Ihrer gesamten Website ändern, oder legen Sie es dynamisch aus Daten:

.config(function($mdThemingProvider) { 
    var color = 'pink'; 
    $mdThemingProvider.theme('dark') 
     .primaryPalette(color) 
     .dark() 
     ; 

Meine Website hat ein paar benutzerdefinierten Elemente, die Hover-Staaten verlangen, und die ideale Sache wäre es, diese in der Akzentfarbe oder Grundfarbe leuchten zu lassen. Aber gibt es eine Möglichkeit, md-Farben oder ähnlich einem Hover Staat anzuwenden?

Meine herkömmlichen schweben Zustände wie folgt aussehen in CSS, natürlich:

.post a:hover{ 
    background-color:#f00; 
} 

hier ein codepen ist für Sie eingerichtet spielen mit: https://codepen.io/anon/pen/PJRzOQ

Answer 1

Falls jemand verzweifelt ist md zu verwenden -Farben als Schwebezustand, das ist laut den Unterlagen nicht möglich. Aber ich habe einen Workaround erstellt, indem ich die Hintergrundfarbe mit md-Farben und hinter einem anderen Element ausgeblendet habe. Der Hover-Status macht dann die oberste Ebene transparent, also scheint es sich um einen dynamisch gesetzten Hover-Zustand zu handeln!

Sie ein Beispiel hier sehen können:

https://codepen.io/anon/pen/oGqPeE

die HTML-Layout wie folgt aussieht:

<ul ng-if="link" md-theme="myTheme"> 
<li ng-repeat="linkObj in link" md-colors="{background:'primary'}"> 
    <a ng-href="{{linkObj.link_url}}" target="_blank" md-colors="{background:'accent'}">   <span ng-bind="linkObj.link_title" md-colors="{color:'accent'}"></span> 
    </a> 
</li> 
</ul>