md-card-hoverにmd-ink-ripple効果を追加するにはどうすればいいですか？

Question

mdカード上にマウスを乗せてホバー効果を加える必要があります。この効果は、md-list-item（項目をホバリングしたとき）でうまくいきます。私はMDカードに同様の効果が必要です。どうすればこれを達成できますか？

Answer 1

ここでインクリップルを与え、md-cardに効果をホバーするmd-list-itemを使用してソリューションですエフェクトといくつかのCSSを使用してリストアイテム内にカードを配置します。この解決策は、私は少し上にあるが、それは動作します。

マークアップ

<div ng-controller="AppCtrl" ng-cloak="" class="carddemoBasicUsage" ng-app="MyApp"> 
    <md-content class="md-padding" layout-xs="column" layout="row"> 
    <md-list-item class="clickCard" ng-click="dummy()"> 
     <md-card md-theme="{{ showDarkTheme ? 'dark-grey' : 'default' }}" md-theme-watch=""> 
     <md-card-title> 
      <md-card-title-text> 
      <span class="md-headline">Click me</span> 
     </md-card-title-text> 
      <md-card-title-media> 
      <div class="md-media-lg card-media"></div> 
      </md-card-title-media> 
     </md-card-title> 
     </md-card> 
     </md-list-item> 
    </md-content> 
</div> 

CSS

.clickCard .md-button { 
    padding: 0 !important; 
} 
.clickCard md-card { 
    margin: 1px; 
} 

Answer 2

現在、以下のクラスを追加すると助けになりました。これ以上の解決策があるかどうかは不思議です。トリックはmd-cardの親としてmd-list-item使用し、それを作動ng-clickのためのダミー関数を与えることですCodePen

-

.ripplelink:hover{ 
    z-index:1000; 
    box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0; 
    -webkit-box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0; 
    -moz-box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0; 
}