AngularJS Conception matérielle - md-colors sur le bouton hover

Question

Le matériel angulaire est génial pour créer des sites sur le thème de la couleur. De plus est les palettes habituelles, vous pouvez créer des thèmes dynamiques sans SCSS, en utilisant comme directives ...

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

... pour définir la couleur du thème de tout élément. Avec quelques lignes de code comme celui-ci, vous pouvez facilement changer la couleur de votre ensemble du site, ou de définir dynamiquement des données:

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

Mon site a quelques éléments personnalisés qui exigent des états de vol stationnaire, et l'idéal serait d'avoir ces lumières dans la couleur d'accent ou la couleur primaire. Mais y a-t-il un moyen d'appliquer md-colors ou similaire à un hover état?

Mes états de vol stationnaire conventionnels ressemblent à ceci en CSS, bien sûr:

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

Voici un codepen mis en place pour vous de jouer avec: https://codepen.io/anon/pen/PJRzOQ

Answer 1

En cas où quelqu'un est désespéré d'utiliser un périphérique -colors comme un état stationnaire, ce n'est pas possible selon les docs. Mais j'ai créé une solution de contournement en définissant la couleur d'arrière-plan avec md-colors, et en la cachant derrière un autre élément. L'état hover rend alors la couche supérieure transparente, il semble donc être un état de survoltage défini dynamiquement!

Vous pouvez voir un exemple ici:

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

la mise en page HTML ressemble à ceci:

<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>