AngularJS 소재 디자인 - 버튼 위로 마우스를 움직일 때의 md 색상

Question

색상이 지정된 사이트를 만들기 위해 각도 재료가 멋지다. 뿐만 아니라 일반적인 팔레트, 당신은 모든 요소의 테마 색상을 설정 ...

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

... 같은 지침을 사용하여, SCSS없이 동적 테마를 만들 수 있습니다. 이런 몇 줄의 코드를 사용하면 쉽게 전체 사이트의 색상을 변경할 수 있습니다, 또는 데이터에서 동적으로 설정 :

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

내 사이트가 가져가 상태를 필요로 몇 가지 사용자 지정 요소, 그리고 이상적인 일을 가지고 악센트 색상이나 기본 색상으로 빛이 들어오는 것입니다. 하지만 md- 색 또는 호버 상태와 유사한 방법을 적용 할 수 있습니까?

내 기존 호버 상태 물론, CSS에 다음과 같이 : 경우 사람에 https://codepen.io/anon/pen/PJRzOQ

Answer 1

는 MD를 사용하는 절망적이다 : 여기

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

당신이 함께 플레이 할 설정된 codepen입니다 hover 상태로 색을 지정합니다. 문서에 따르면 불가능합니다. 하지만 배경 색상을 md-colors로 설정하고 다른 요소 뒤에 숨겨서 해결 방법을 만들었습니다. 마우스를 올리면 최상위 레이어가 투명 해 지므로 동적으로 설정된 호버 상태 인 것으로 보입니다!

당신은 여기에서 예를 볼 수 있습니다

:

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

html로 레이아웃은 다음과 같습니다

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